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本 书 采用 “案例 诠释 理论 ， 项 目 推动 实践 ”的 理念 编写 。 内 容 包 括 小 程序 开发 环境 、 小 程序 结构 分 析 、 
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微 信 小 程序 (Mini Program) 是 一 种 不 用 下 载 就 能 使 用 的 应 用 程序 。 自 2017 年 1 月 9 日 
正式 上 线 到 现在 ， 微 信 小 程序 已 经 构造 了 新 的 小 程序 开发 环境 和 开发 者 生态 环境 。 小 程序 也 
是 多 年 来 中 国 IT 行业 里 一 个 真正 能 够 影响 到 普通 程序 员 的 创新 成 果 。 由 于 其 具有 “极度 轻 量 
化 、 无 处 不 在 、 用 完 即 走 ” 的 更 好 用 户 体验 和 “一 次 开发 、 跨 平台 运行 ”的 低 开 发 成 本 ， 使 
其 既 可 以 服务 于 各 行 各 业 ， 也 吸引 了 大 量 的 开发 者 。 小 程序 发 展 带 来 了 更 多 的 就 业 机 会 ， 社 
会 效应 不 断 提 升 。 

编写 本 书 的 目的 就 是 帮助 读者 学 到 微 信 小 程序 的 开发 技术 ， 掌 握 解决 实际 问题 的 能 力 ， 
提高 项 目 开发 水 平 ， 快 速成 为 一 名 合格 的 微 信 小 程序 开发 工程 师 。 本 书 气 弃 孤立 介绍 知识 点 
的 编排 模式 ， 而 采用 “案例 诠释 理论 、 项 目 推动 实践 ”的 编写 思路 ， 既 讲解 项 目的 实现 过 程 
和 步骤 ， 又 讲解 项 目 实现 时 所 需 的 理论 知识 和 技术 ， 让 读者 在 掌握 理论 知识 后 会 灵活 运用 ， 
并 在 新 项 目 开 发 中 不 断 拓展 知识 ， 真 正 实现 “ 教 、 学 、 做 ”的 有 机 融合 ， 提 升 从 案例 模仿 到 
应 用 创新 的 递 进 式 项 目 化 软件 开发 能 力 。 

本 书 作者 长 期 从 事 高 校 软件 开发 类 课程 的 教学 与 应 用 开发 ， 有 丰富 的 教材 编写 经 验 。 本 
书 采 用 了 作者 主持 研究 的 2018 年 教育 部 产 学 合作 协同 育 人 项 目 (腾讯 微 信 事 业 部 资助 ) 中 取 
得 的 成 果 作为 部 分 内 容 。 

全 书 共 分 8 章 ， 内 容 安 排 如 下 : 

第 1 章 小 程序 开发 环境 ,介绍 微 信 小 程序 的 基础 知识 ,包括 小 程序 的 基本 架构 与 特性 、 
开发 环境 的 搭建 过 程 和 创建 小 程序 的 步骤 等 。 

第 2 章 ”小 程序 结构 分 析 。 介 绍 微 信 小 程序 的 目录 结构 及 作用 ， 阁 述 小 程序 的 整体 描述 
文件 和 页 面 描述 文件 的 功能 及 编写 的 语法 规则 ,并 通过 技术 实例 演示 了 WXML、 小 程序 页 面 
生命 周期 的 工作 机 制 、 全 局 页 面 配置 文件 和 页 面 配 置 文件 的 编写 方法 。 

第 3 章 界面 设计 。 介 绍 微 信 小 程序 的 常用 样式 、flex 页 面 布局 (弹性 布局 ) 的 概念 及 
它们 在 小 程序 界面 设计 中 的 使 用 方法 。 结 合 多 个 技术 实例 和 仿 “ 猜 画 小 歌 ” 界 面 、 商 品 展示 
界面 等 项 目 案 例 ， 阅 述 微 信 小 程序 开发 框架 提供 的 view、text、input、button、swiper、image 
和 scroll-view 等 基本 组 件 在 小 程序 开发 中 的 应 用 场景 和 使 用 方法 。 

第 4 章 基本 组 件 。 介绍 组 件 在 小 程序 页 面 的 定义 和 属性 设置 方法 ， 介 绍 事 件 的 定义 、 
绑 定 和 使 用 方法 ; 结合 多 个 技术 实例 和 “小 学 生 算术 题 ”““ 猜 扑克 游戏 ”““ 信 息 登 记 页 面 ”““ 毕 
业 生 调查 表 ” 和 “购物 车 小 程序 ”等 项 目 案例 ， 阐 述 微 信 小 程序 开发 框架 提供 的 基本 组 件 的 
使 用 方法 和 应 用 场景 。 

第 5 章 数据 存储 与 访问 。 介绍 数据 缓存 API 图 片 API、 位 置 API 和 文件 API 的 用 法 ， 
并 结合 多 个 技术 实例 和 “随手 拍 ”“ 文 本 阅读 器 ”等 项 目 案例 曾 述 其 应 用 场景 和 方法 。 

第 6 章 多 媒体 应 用 开发 。 介 绍 普 通 音 频 API、 背 景 音频 API、 动 画 API 和 录音 管理 器 


微 信 小 程序 案例 开发 “区 F 


的 使 用 方法 , 并 结合 多 个 技术 实例 和 “影音 盒子 ”项 目 案例 的 “音乐 播放 器 "“ 音 视频 录制 器 ” 
的 子 模块 阐述 微 信 小 程序 中 多 媒体 应 用 开发 的 流程 、 相 关 技术 和 应 用 场景 。 

第 7 章 硬件 设备 应 用 开发 ,介绍 监测 设备 状态 、 跟 踪 用 户 行为 和 获取 传感器 数据 等 API 
的 使 用 方法 ， 并 结合 “指南 针 ”“ 个 性 化 闹钟” 等 项 目 案例 介绍 罗盘 API、 设 备 方向 API、 加 
速 计 API 及 振动 API 的 应 用 开发 过 程 和 实现 方法 。 

第 8 章 网络 应 用 与 云 开发 。 介 绍 微 信 小 程序 开发 框架 访问 第 三 方 云 数据 库 平台 、 小 程 
序 云 开发 、 网 络 请 求 API、 向 服务 器 上 传 文件 API 以 及 从 服务 器 下 载 文 件 API 的 使 用 方法 ， 
并 结合 多 个 技术 实例 和 “实验 室 安全 知识 学 习 平台 ”“ 竞 赛 打分 系统 ”“ 天 气 预报 系统 ”等 项 
目 全 面 详细 阐述 用 小 程序 实现 网 络 访问 的 工作 机 制 . 基 本 原理 和 小 程序 网 络 应 用 开发 的 流程 。 

与 同类 图 书 相 比 ， 本 书 内 容 有 以 下 特点 : 

(1) 读者 覆盖 面 广 。 由 浅 入 深 的 知识 点 体系 重 构 和 开发 技术 介绍 ， 既 可 以 让 零 基 础 的 初 
学 者 快速 入 门 ， 掌 握 小 程序 的 开发 技术 ， 也 可 以 让 具有 一 定编 程 基础 的 开发 者 找到 合适 的 起 
点 ， 进 一 步 提升 解决 问题 能 力 和 项 目 开发 能 力 。 

(2) 内 容 系 统 全 面 。 系 统 全 面 地 介绍 微 信 小 程序 开发 包含 的 180 个 知识 点 和 应 用 场景 ， 
使 读者 既 可 以 系统 性 地 掌握 理论 知识 ， 也 可 以 获得 通俗 易 懂 的 实例 化 技术 文档 。 

(3) 案例 典型 实用 。 直 接 选 取 面 向 行业 企业 需求 的 项 目 案例 进行 设计 和 实现 ， 使 读者 既 
可 以 提高 学 习 兴趣 、 巩 固 理论 知识 和 强化 工程 实践 能 力 ， 也 可 以 将 案例 的 解决 方案 应 用 到 其 
他 项 目 中 。 

(4) 资料 翔实 丰富 。 本 书 配套 62 个 开发 技术 范例 和 16 个 精彩 项 目 案例 的 140 个 微 课 视 
频 。 读 者 不 仅 可 以 随时 随地 扫 码 观看 重点 、 难 点 内 容 ， 还 可 以 下 载 教学 课件 、 教 学 大 纲 、 习 
题 和 程序 源 代码 等 教学 资源 ， 更 好 地 学 习 和 掌握 小 程序 开发 技术 ， 提 高 实际 开发 水 平 。 

在 本 书 的 编写 过 程 中 得 到 了 清华 大 学 出 版 社 的 帮助 和 指导 ， 周 巧 扣 、 李 霞 、 叶 苗 等 在 资 
料 收 集 和 原稿 校对 等 方面 做 了 一 些 工作 ， 在 此 一 并 表示 感谢 。 

由 于 作者 理论 水 平和 实践 经 验 有 限 ， 书 中 玻 漏 和 不 足 之 处 在 所 难免 ， 奶 请 广大 读者 提出 
宝贵 的 意见 和 建议 。 


倪 红 军 
2019 年 10 月 
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微 信 小 程序 是 运行 在 微 信 环境 中 的 应 用 ， 它 只 能 在 微 信 中 运行 ， 不 能 运行 在 浏览 器 等 其 
他 环境 。 微 信 团 队 提供 了 专门 的 开发 工具 ， 用 于 微 信 人 小 程序 的 开发 ， 提 供 了 丰富 的 API， 让 
微 信 小 程序 既 能 够 与 移动 终端 设备 实现 获取 摄像 头 拍 照 、 访 问 文件 系统 等 交互 ， 也 能 够 与 微 
信 实 现 获 取 登 录用 户 信息 、 微 信 支 付 及 使 用 模板 消息 向 微 信 发 送 通 知 消息 等 交互 。 

。 了 解 小 程序 的 发 展 及 应 用 现状 ; 

。 掌握 小 程序 的 基本 架构 与 特性 ; 


。 掌握 小 程序 开发 环境 的 搭建 过 程 及 常用 工具 的 使 用 方法 ; 
e 掌握 小 程序 的 基本 创建 步骤 。 


C1.1 小 程序 的 发 展 与 现状 


2017 年 1 月 9 日 小 程序 正式 上 线 ， 当 时 只 要 将 微 信 更 新 到 最 新 版 本 (V6.5.3)， 就 可 以 
通过 线 下 扫 码 、 微 信 搜 索 、 公 众 号 关联 、 好 友 分 享 、 历 史记 录 等 方式 体验 小 程序 。 所 谓 小 程 
序 , 是 指 微 信 公 众 平台 小 程序 , 它 是 不 需要 下 载 安装 就 可 以 直接 使 用 的 应 用 程序 , 与 订阅 号 、 
服务 号 、 企 业 微 信 〈 原 企业 号 ) 是 并 行 体系 ， 但 是 它们 有 着 不 一 样 的 使 用 场景 。 下 面 逐 一 
介绍 。 

订阅 号 

订阅 号 为 媒体 和 个 人 提供 一 种 新 的 信息 传播 方式 , 主要 偏向 为 用 户 传达 资 
讯 〈 类 似 报 纸 杂 志 )， 适 用 于 个 人 、 媒 体 、 企 业 、 政 府 或 其 他 组 织 ， 每 天 〈24 由 : 
小 时 内 ) 可 群发 1 条 消息 。 其 展现 效果 如 图 1.1 所 示 。 如 果 想 用 公众 平台 简单 
发 消息 ， 做 宣传 推广 服务 ， 建 议 选择 订阅 号 。 

服务 号 

服务 号 主要 为 企业 和 组 织 提供 更 强大 的 业务 服务 与 用 户 管理 能 力 ， 偏 向 服务 类 交互 ( 功 
能 类 似 12315、114 等 电话 服务 ， 提 供 服务 查询 )， 适 用 于 媒体 、 企 业 、 政 府 或 其 他 组 织 ， 每 
个 月 内 都 可 以 发 送 4 条 消息 。 其 展现 效果 如 图 1.2 所 示 。 如 果 想 用 公众 平台 进行 商品 销售 ， 
建议 选择 服务 号 ， 后 续 可 认证 再 申请 微 信 支付 商户 。 

图 企业 微 信 

企业 微 信 是 一 个 全 平台 企业 办 公 工 具 ， 它 提供 与 微 信 一 致 的 沟通 体验 ， 为 企业 员工 提供 
最 基础 和 最 实用 的 办 公 服 务 ， 并 加 入 贴 合 办 公 场 景 的 特色 功能 、 轻 OA 工具 ， 合 理化 区 分 工 
作 与 生活 ， 提 升 工作 效率 。2018 年 6 月 29 日 ， 企 业 微 信 2.0 版 本 发 布 ， 正 式 与 企业 号 合 
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其 展现 效果 如 图 1.3 所 示 。 


19:44 


腾讯 手机 充值 
村 充值 成 功 通知 
除了 教书 ，Ta 还 有 这 些 隐藏 技能 A 


50 元 话费 已 成 功 到 账 ! 


充值 号 码 : 15i12222222 
支付 金额 : 49.95 元 


证 体验 话费 红色 


如 何 间 看 余额 EA 


您 可 以 在 公众 号 底部 菜单 
一 人。 客服 帮助 -余额 查询 "中 免费 
查询 话费 和 流量 余额 。 


三 全 


图 1.1 订阅 号 展现 效果 图 1.2 服务 号 展现 效果 
图 小 程序 
小 程序 是 一 种 不 需要 下 载 安装 即 可 运行 在 微 信 环 境 中 的 应 用 程序 ， 它 实现 了 应 用 “触手 
可 及 ”的 梦想 ， 用 户 扫 一 扫 或 者 搜 一 下 即 可 使 用 。 简 单 地 说 ， 就 是 把 手机 上 的 App 搬 到 微 信 
里 面 ， 不 需要 下 载 安装 就 可 以 直接 使 用 。 用 户 可 以 在 微 信 的 “发 现 ” 栏 找到 “小 程序 ”的 入 
口 ， 从 该 入 口 可 以 打开 需要 的 小 程序 ， 如 图 1.4 所 示 。 


大] 教务 -在 线 选课 


国 姓 尖 


回 校 务 -校园 缴费 


加 samw= 


图 1.3 ”企业 微 信 展现 效果 图 1.4 小 程序 入 口 

2016 年 1 月 9 日 ， 微 信和 团队 内 部 提出 “应 用 号 ”设想 ;2016 年 1 月 11 日 ， 张 小 龙 在 微 
信 公 开课 上 阐述 微 信 的 四 大 价值 观 : 一 切 以 用 户 价值 为 依 归 、 让 创造 发 挥 价值 、 好 的 产品 是 
用 完 即 走 以 及 让 商业 化 存在 于 无 形 之 中 ， 并 首次 提出 “以 服务 为 主 ” 开 发 一 个 新 的 形态 
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应 用 号 ; 2016 年 9 月 22 日 ， 微 信 公 众 平台 对 外 发 送 “ 小 程序 ”内 测 邀 请 ， 首 批 内 测 名 额 200 
个 ; 2016 年 11 月 3 日 ， 微 信 小 程序 对 外 开放 公测 ， 开 发 者 可 以 登录 微 信 公众 平台 申请 ， 开 
发 完成 后 可 以 提交 审核 ， 但 公测 期 间 不 能 发 布 ; 2016 年 12 月 28 日 ， 张 小 龙 在 微 信 公 开课 上 
第 一 次 完整 阐述 了 小 程序 ， 并 明确 小 程序 在 微 信 没有 入 口 、 没 有 小 程序 商店 、 没 有 订阅 关 
系 、 不 能 推送 消息 、 可 以 分 享 到 聊天 和 群 等 ，2016 年 12 月 30 日 ， 微 信 公 众 平台 对 外 公告 ， 
上 线 的 微 信 小 程序 最 多 可 以 生成 10000 个 带 参 数 的 二 维 码 ; 2017 年 1 月 9 日 , 微 信 小 程序 正 
式 上 线 。 


el 


1.2.1 小 程序 的 基本 架构 


微 信 小 程序 的 架构 主要 包括 视图 层 (View)、 邮 辑 层 (App Service)。 视 图 国 ; 
层 用 来 实现 泻 染 页 面 结构 ， 罗 辑 层 用 来 实现 逻辑 处 理 、 数 据 请 求 、 接 口 调 用 ， 2 
它们 在 两 个 进程 里 执行 。 视 图 层 和 逻辑 层 通过 系统 层 的 JSBridge 进行 通信 ， 由 
辑 层 把 数据 变化 通知 视图 层 ， 并 触发 视图 层 进行 页 面 更 新 ， 视 图 层 把 触发 事件 
通知 逻辑 层 进行 业务 处 理 。 具 体 架 构 如 图 1.5 所 示 。 


View《〈 视 图 层 ) App Service 逻辑 层 ) 


JSBridge 


Natve (系统 层 ) 


1.5 ”小 程序 基本 架构 


视图 层 (View) 

视图 层 由 WXML (WeiXin Markup Language) 和 WXSS (WeiXin Style Sheets) 编写 ， 用 
组 件 进行 展示 。WXML 是 一 套 标签 语言 ， 结 合 基础 组 件 、 事 件 系 统 可 以 构建 出 页 面 的 结构 ， 
它 支 持 数据 绑 定 、 罗 辑 (算术 ) 运 算 、 模 板 引用 和 添加 事件 ，WXSS 是 一 套 样式 语言 ， 用 于 描 
述 页 面 的 样式 ， 也 就 是 用 来 决定 WXML 的 组 件 应 该 怎么 显示 ， 它 支持 大 部 分 CSS 特性 ， 添 
加 了 可 根据 屏幕 宽度 自 适 应 的 尺寸 单位 ppx， 可 导入 外 联 样式 表 等 。 
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逻辑 层 (App Service) 

逻辑 层 由 JavaScript 编写 ， 它 将 数据 进行 处 理 后 发 送 给 视图 层 ， 同 时 接受 视图 层 的 事件 
反馈 。 为 了 方便 地 开发 小 程序 ， 小 程序 开发 框架 在 JavaScript 的 基础 上 做 了 一 些 修改 。 

(1) 增加 App() 和 Page( ) 方 法 ， 进 行程 序 和 页 面 的 注册 。 

(2) 提供 丰富 的 API， 如 扫 一 扫 、 支 付 等 微 信 特 有 功能 。 

(3) 每 个 页 面 有 独立 的 作用 域 ， 并 提供 模块 化 能 力 。 

(4) 由 于 框架 并 非 运行 在 浏览 器 中 ， 所 以 JavaScript 在 Web 中 的 一 些 功能 无 法 使 用 ， 
如 document、window 等 。 

(5) 开发 者 写 的 所 有 代码 最 终 将 会 打包 成 一 份 JavaScript， 并 在 小 程序 启动 时 运行 , 直到 
小 程序 销毁 。 


1.2.2 ”小 程序 的 特性 


微 信 小 程序 是 一 种 全 新 的 连接 用 户 与 服务 的 方式 ， 它 可 以 在 微 信 内 方便 地 获取 和 传播 ， 
同时 具有 出 色 的 使 用 体验 。 

(1) 不 用 安装 ， 用 完 即 走 。 

小 程序 是 一 种 不 需要 下 载 安 装 即 可 使 用 的 应 用 程序 ， 用 户 扫 一 扫 或 者 搜 一 下 就 可 以 打开 
应 用 ， 不 需要 关心 设备 是 否 安装 太 多 应 用 、 内 存 是 否 够 用 等 问题 。 因 为 当 打 开 小 程序 ， 用 完 
了 相应 的 功能 ， 直 接 退 出 即 可 ， 它 不 占据 设备 的 内 存 空间 。 

(2) 开发 成 本 低 ， 可 以 跨 平台 。 

小 程序 是 基于 微 信 环境 存在 的 类 似 原 生 App 用 户 体验 的 产品 ， 相 对 于 原生 App、 网 站 来 
说 ， 开 发 更 为 简单 ， 管 理 也 极为 方便 。 小 程序 不 需要 分 别针 对 iOS、Android 平台 编写 两 套 代 
码 ,只 要 在 装 有 微 信 的 系统 平台 上 就 可 以 运行 ,因此 小 程序 的 开发 门槛 比 原生 App 开发 要 低 。 

(3) 使 用 方便 ， 推 广 简单 。 

对 于 用 户 来 说 ， 小 程序 的 UI (User Interface) 和 操作 流程 相对 统一 ， 可 以 免除 烦琐 的 流 
程 , 直接 通过 微 信 登录 , 降低 用 户 的 使 用 难度 。 对 小 程序 拥有 者 来 说 , 只 需要 推广 小 程序 码 ， 
有 微 信 的 用 户 可 以 通过 搜索 、 朋 友 推 荐 、 扫 码 等 方式 获得 小 程序 入 口 。 

当然 ， 除 了 上 述 的 一 些 优点 外 ， 到 目前 为 止 ， 小 程序 发 展 过 程 中 也 面临 以 下 一 些 问题 。 

(1) 小 程序 不 能 分 享 到 朋友 圈 ， 只 能 分 享 给 朋友 、 和 群 。 

(2) 小 程序 没有 推送 功能 ， 不 能 给 用 户 推送 消息 。 


全 0 1.3 小 程序 开发 环境 搭建 与 工具 介绍 


小 程序 的 开发 环境 搭建 比较 简单 下载 一 个 开发 者 工具 即 可 。 微 信 官 方 提 加 
供 了 一 个 名 为 微 信 Web 开发 者 工具 的 IDE， 开 发 者 只 要 登录 官网 就 可 以 直接 如 
下 载 。 


1.3.1 开发 环境 搭建 


下 载 微 信 Web 开发 者 工具 
登录 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 网 站 下 载 安 
装 包 ， 下 载 页 面 如 图 1.6 所 示 。 开 发 者 可 以 根据 不 同 的 操作 系统 选择 相应 版 本 的 安装 包 。 
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weixin.qq.com, 


最 新 版 本 下 载 地 址 (1.02.1902010) 


稳定 版 本 (1.02.1812271) 


2019.02.01 


FE _ 术 各 宕 而 产 过 幸 式 信息 号 元 不全 的 同 


图 1.6 开发 者 工具 下 载 页 面 
安装 微 信 Web 开发 者 工具 
下 载 完 成 后 ， 双 击 运 行 安装 包 ， 出 现 图 1.7 所 示 的 页 面 。 一 般 情况 下 ， 按 照 安装 向 导 提 
示 保 持 默认 设置 ， 单 击 “ 下 一 步 ” 按 钮 ， 一 直到 安装 完成 即 可 。 
国 赏 信 Web 开 发 者 I 具 1.02.1809111 实 思 时 守 9 


欢迎 使 用 “ 微 信 web 开发 者 工具 
1. 02.1809111” 安 装 向 导 


这 个 向 导 将 指引 你 完 | 六 Wal 县 
i 


ee 


单 击 [下 一 步 四 ] 继续 。 


图 1.7 安装 开发 工具 页 面 


1.3.2 新建 第 一 个 小 程序 


申请 ApplD 

登录 https://mp.weixin.qq.com， 打 开 图 1.8 所 示 的 “ 微 信 公 众 平台 ”页 面 ， 单 击 “ 立 即 注 
册 ” 按 钮 ， 弹 出 图 1.9 所 示 的 “账号 类 型 选择 ”页 面 ， 单 击 “ 小 程序 ”选项 后 填 入 相关 信息 ， 
就 可 以 完成 注册 。 

注册 成 功 后 ， 单 击 图 1.10 左 侧 的 “开发 ”选项 ， 右 侧 显示 “开发 ”选项 的 内 容 ， 然 后 在 
右 侧 单 击 “ 开 发 设置 ”标签 ， 就 可 以 显示 小 程序 的 AppID， 如 图 1.10 所 示 。 
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[a 


Dp 


| @@ 简体 中 文 - 


图 1.8 微 信 公众 平台 


册 的 账号 类 到 


图 1.9 “账号 类 型 选择 ”页 面 


微 信 公众 平台 | 小 程序 
首页 开发 
运 堆 中 心 。 ”开发 设置 “开发 者 I 具 ”接口 设置 
管理 a 
版 本 管理 
成 员 管理 开发 者 ID 
E 开发 者 ID 
ee AppID( 小 程序 ID) mso 
功能 
AppSecret( 小 程序 密 钥 ) 
附近 的 小 程序 
物流 助手 
宫 服 
模板 消息 服务 器 域名 
开发 服务 委 本 下 
推广 ， 
iequestS 法 二 Eee 
流量 主 ttps//apidoubancom 
广告 主 
socket 合 法 域名 
设置 


说 明 


一 个 月 内 可 申请 5 次 修改 
本 月 还 可 修改 5 次 


图 1.10 “小 程序 的 ApplD 
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新 建 小 程序 

安装 完 开 发 工具 ，AppID 申请 成 功 后 ， 打 开 微 信 Web 开发 者 工具 ， 弹 出 图 1.11 所 示 的 
微 信 开 发 者 工具 二 维 码 ， 需 要 使 用 移动 终端 设备 的 微 信 扫 码 登录 ,， 扫 码 后 需要 在 图 1.12 所 示 
的 微 信 扫 描 端 〈 移 动 终端 设备 ) 单 击 “ 确 认 登 录 ” 按 钮 ， 确 认 登 录 后 弹出 图 1.13 所 示 的 开发 
者 工具 选择 页 面 。 


ai 中 国 移动 令 20:00 7960%m) 


微 信 开 发 者 工具 


欢迎 使 用 短信 开发 者 工具 


图 1.11 开发 者 工具 二 维 码 页 面 1.12 ” 微 信 扫 描 端 确认 
图 1.13 左 侧 的 “小 程序 项 目 ” 工 具 用 来 编辑 、 调 试 和 发 布 微 信 小 程序 ,“ 公 众 号 网 页 项 
目 ” 工 具 用 来 开发 和 调试 微 信 公 众 号 、 订 阅 号 的 应 用 ， 本 书 只 介绍 “小 程序 项 目 ” 工具。 单 
击 图 1.13 右 侧 的 “+” 后 弹出 图 1.14 所 示 的 小 程序 项 目 管理 页 面 。 在 该 页 面 中 需要 填 入 “项 


图 1.13 开发 者 工具 选择 页 面 


微 信 小 程序 案例 开发 “区 


miniprogram-test-1 


Ci\Users\AusenWeChatProjects\miniprogram-test-1 


车 无 ApplD 可 注册 


或 使 用 测试 号 


JavaScript 


图 1.14 小 程序 项 目 管理 页 面 


目 名 称 ”“ 项 目 目录 ”和 “AppID” 这 3 个 必 填 项 。“ 项 目 名 称 ” 为 创建 的 小 程序 名 称 ;“ 项 目 
目录 ”可 以 直接 选择 用 于 存放 创建 的 小 程序 项 目的 本 地 文件 夹 ; AppID 代表 小 程序 的 ID 号 ， 
必须 拥有 微 信 小 程序 账号 才 可 以 申请 这 个 ID 号 ,读者 可 以 到 微 信 公 众 平台 官网 注册 申请 微 
信 小 程序 账号 ， 注 册 地 址 为 https:/mp.weixin.qq.com。 如 果 没 有 申请 ID 号 ， 也 可 以 单 击 “ 测 
试 号 ” 同时 在 图 1.14 下 方 的 开发 模式 和 语言 下 拉 列 表 框 中 选择 “小 程序 ”和 “JavaScript” 
两 个 选项 (开发 者 可 以 根据 实际 需要 选择 )， 然 后 单 击 “确定 ”按钮 ， 就 会 创建 一 个 官方 默认 
小 程序 项 目 。 

官方 默认 小 程序 项 目的 目录 结构 及 文件 如 图 1.15 所 示 ， 根 目录 下 app.js、app.json、 


vb pages 
v DD index 
index js 
<> index wxml 
wms index Wxss 
v 巴 logs 
logsjs 
{) logsjson 
<> logs wxml 
wss 10gS WXSS 
ruts 
utiljs 
appjs 
{) appjson 
wss app.WXSS 


{0%) project config json 


1.15 ”官方 默认 小 程 的 目录 及 文件 结构 


科 第 1 章 小 程序 开发 环境 
app.wWxss 和 project.config.json 四 个 文件 分 别 用 于 处 理 小 程序 的 业务 逻辑 、 对 小 程序 的 页 面 路 
径 等 相关 属性 进行 全 局 配置 、 定 义 小 程序 页 面 的 全 局 样式 和 保存 小 程序 项 目的 配置 信息 。 
1.3.3 微 信 开发 者 工具 界面 功能 介绍 


创建 小 程序 项 目 成 功 后 ,进入 图 1.16 所 示 的 微 信 开 发 者 工具 主 界面 。 开 发 者 工具 主 界面 
包含 菜单 栏 、 工 具 栏 、 模 拟 器 窗口 、 编 辑 器 窗口 〈 含 目录 结构 窗口 和 代码 窗口 ) 和 调试 器 


™ Wed Sep 12 2918 22:13:13 GMT+8800 appservice?t=1536761592227:1097 

(中 国标 和 时间 ) 接口 调整 

人 enfe 可 后 不法 要 8:1 | 
;https://develooers weixin. gg. com/blogdetail?actioneget 了 


调试 器 窗口 


图 1.16 微 信 开 发 者 工具 主 界面 


菜单 栏 列 出 了 开发 小 程序 时 的 常用 命令 。 工 具 栏 包 含 了 开发 小 程序 时 的 工具 。 模 拟 器 
窗口 可 以 模拟 小 程序 在 微 信 客 户 端的 表现 ， 小 程序 的 代码 通过 编译 后 可 以 在 模拟 器 上 直接 运 
行 。 目 录 结 构 窗 口 用 于 对 项 目的 文件 、 目 录 结 构 进行 管理 。 代 码 窗口 用 于 编辑 小 程序 项 目 
相关 的 代码 。 调 试 器 窗口 分 为 7 大 功能 模块 : Wxml panel 用 于 帮助 开发 者 开发 wxml 转换 
后 的 界面 ，Sources panel 用 于 显示 当前 项 目的 脚本 文件 ，AppData panel 用 于 显示 当前 项 目 
运行 时 小 程序 的 具体 数据 ，Storage panel 用 于 显示 当前 项 目 使 用 wx.setStorage( ) 或 
wx.setStorageSync( ) 方 法 后 的 数据 存储 情况 , Network Panel 用 于 观察 和 显示 request 和 socket 
的 请 求情 况 ，Console panel 用 于 开发 者 在 此 输入 、 调 试 代码 或 显示 小 程序 的 错误 输出 ，Sensor 
panel 用 于 开发 者 在 这 里 选择 模拟 地 理 位 置 、 模 拟 移动 设备 表现 、 调 试 重力 感应 API 等 。 


人 CE 


本 章 介 绍 了 微 信 平 台 的 订阅 号 、 服 务 号 、 企 业 微 信和 小 程序 的 应 用 场景 ， 详 细 曾 述 了 小 
程序 的 基本 架构 和 特性 ， 介 绍 了 小 程序 开发 工具 的 安装 使 用 方法 和 创建 小 程序 的 步骤 ， 为 后 
续 的 微 信 小 程序 开发 打下 了 基础 。 


小 程序 结构 分 析 


微 信 小 程序 的 开发 是 基于 微 信 小 程序 框架 结构 实现 的 ， 每 个 微 信 小 程序 的 目录 结构 、 整 
体 描述 文件 和 页 面 描述 文件 都 是 由 相对 固定 的 格式 和 语法 组 成 的 。 由 快速 启动 模板 创建 的 小 


程序 根 目录 下 的 pages 文件 夹 用 于 存放 页 面 描述 文件 ，utils 文件 夹 用 于 存放 通用 功能 代码 ， 
appjs 文件 是 小 程序 项 目的 启动 入 口 文件 ，app.wxss 文件 是 整个 小 程序 的 公共 样式 ，app.json 
文件 用 于 对 小 程序 进行 全 局 配置 。 
(本章 学 习 目 村 
。 掌握 小 程序 的 目录 结构 、 文 件 格 式 及 小 程序 根 目录 下 pages、utils 目录 和 文件 的 功能 ; 
。 熟悉 小 程序 的 整体 描述 文件 app.js、appjson 和 app.wxss 的 文件 格式 和 功能 ; 


e 掌握 小 程序 的 页 面 结构 文件 wxml、 页 面 样式 文件 wxss、 页 面 逻辑 文件 js 和 页 面 配 
置 文件 json 的 功能 和 使 用 方法 。 


OO 2.1 小 程序 的 目录 和 文件 


2.1.1 “小 程序 的 目录 结构 
使 用 图 2.1 所 示 的 小 程序 项 目 管理 工具 创建 小 程序 时 ， 默 认 创建 的 小 程 目 


ox A 
外 程序 项 目 
EE 
小 游戏 目录 DiweChat_video\CODE\chap2_1 
代 到 上 以 ApPID ”mereererreeeeee 
PS 者 无 ApplD 可 注册 
a 或 使 用 测试 号 
公众 网 页 开发 模式 【小 本 序 
后 庄 服 务 人 不 使 用 云 服务 
小 程序 云 开 发 
小 程序 云 开发 为 开发 者 提 供 数 宕 库 、 存 信和 去 对 魏 等 完整 的 云 繁 支持 ， 无 天 湛 
建 县 务 器 ， 使 用 二 台 提 供 的 AP| 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 线 和 
法 代 。 了 解 更 多 
_) 慎 讯 云 
更 注入 取消 部 建 


图 2.1 小 程序 项 目 管理 工具 
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录 结 构 如 图 2.2 所 示 。 其 中 ，pages 目录 是 页 面 根 目录 ， 用 于 存放 小 程序 的 页 面 文件 和 页 面 文 
件 所 在 的 子 目录 ; index 目录 和 logs 目录 就 是 这 个 小 程序 分 别 用 于 存放 index 页 面 和 logs 页 
面 的 子 目录 。 


v pages 
v 斩 index 
index js 
{) index json 
<> index.wxml 
wss index Wxss 
vlogs 
logsjs 
{) logsjson 
<> logs.wxml 
wss 10gS.WXSS 
”DD uts 
utiljs 
appjs 
{} appjson 


wss app.WXSS 


{o) project.config json 


图 2.2 小 程序 目录 结构 


2.1.2 ”小 程序 的 文件 格式 


小 程序 项 目 中 主要 包含 4 种 文件 类 型 : 

js 后 级 的 文件 为 页 面 脚本 文件 ， 用 于 实现 页 面 的 业务 逻辑 ; 

json 后 绥 的 文件 为 配置 文件 ,用 于 设置 小 程序 的 配置 效果 , 主要 以 json 数据 格式 存放 ; 
wxss 后 级 的 文件 为 样式 表 文 件 ， 用 于 对 小 程序 用 户 界面 的 美化 设计 ; 

wxml 后 缀 的 文件 为 页 面 结构 文件 ， 用 于 在 页 面 上 增加 视图 、 组 件 等 来 构建 页 面 。 


2.1.3 pages 日 录 


pages 目录 主要 用 于 存放 小 程序 的 页 面 文件 ， 其 中 每 个 文件 夹 对 应 一 个 页 面 ， 该 文件 夹 
中 通常 包含 wxml 文件 、wxss 文件 ,js 文件 和 json 文件 , 其 中 wxml 文件 和 js 文件 是 必需 的 。 
为 了 方便 开发 者 减少 配置 项 ,文件 名 称 必须 与 页 面 的 文件 夹 名 称 相同 ， 如 图 2.2 所 示 的 index 
文件 夹 ， 该 文件 夹 下 的 文件 名 称 只 能 是 index.js、index.json、index.wxml 和 index.wxss。 


2.1.4 ”utils 目录 


utils 目录 主要 用 于 存放 共用 程序 逻辑 库 ， 即 存放 一 些 全 局 的 js 文件， 目录 名 可 以 由 开发 
者 根据 需要 自 定义 ， 如 图 2.2 所 示 的 utiljs 文件 。 将 公共 的 js 函数 文件 保存 在 此 目录 中 ， 可 
供 开发 者 全 局 调用 。 例 如 ， 创 建 小 程序 时 默认 生成 的 utiljs 文件 代码 如 下 : 
1 const formatTime = date => {// 定 义 formatTime 函数 ， 返 回 时 间 格 式 


4 const year = date.getFullYear() 
仿 const month = date.getMonth() + 1 
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4 const day = date.getDate() 

5 const hour = date.getHours () 

6 const minute = date.getMinutes () 

学 const second = date.getSeconds () 

8 return [year, month, day] .map (formatNumber) .join('/') + ' ' + [hour, 
minute, second] .map (formatNumber) .join(':"') 

at: 


10 const formatNumber = n => {// 定 义 formatNumber 函数 ， 返 回 字符 品格 式 
1 n = n.tostring() 

5 ia 

全 

14 module.exports = {// 声 明 可 由 外 部 调用 

5 formatTime: formatTime 

1 


对 于 允许 外 部 调用 的 方法 ， 需 要 用 module.exports 进行 声明 后 《上述 代 码 第 14 行 )， 才 
能 在 其 他 js 文件 中 通过 以 下 代码 引用 : 


1 var util = require('../../utils/util.js'); // 在 需要 使 用 的 js 文件 中 导入 js 
2 Page({ 

3 data: { 

4 time:util.formatTime (new Date()) // 调 用 函数 时 ， 传 入 new Date () 参数 
5 }, 

6 onLoad: function () { 

沉 Var time = util.formatTime (new Date()); 

8 this.setData({ 

time: time 

10 ]) 7 

11 } 

pp) 


2.1.5 小 程序 根 目录 下 的 文件 


一 个 小 程序 的 主体 部 分 由 3 个 文件 组 成 ， 必 须 存放 在 项 目的 根 目 录 下 ， 每 个 文件 的 名 称 
和 功能 都 是 特定 的 ， 具 体 如 下 : 

(1) app.js: 该 文件 是 小 程序 项 目的 启动 入 口 文 件 ， 处 理 小 程序 生命 周期 中 的 一 些 方法 。 
文件 内 容 不 能 为 空 。 

(2) appjson: 该 文件 是 小 程序 的 全 局 配置 文件 ， 用 于 设置 导航 条 的 颜色 、 字 体 大 小 、 
tabBar 等 。 文 件 内 容 不 能 为 空 。 

(3) app.wxss: 该 文件 是 小 程序 的 公共 样式 文件 ， 用 于 全 局 美化 设计 界面 。 文 件 内 容 可 

项 目 根 目录 下 还 有 一 个 project.configjson 文件 ， 该 文件 是 项 目 IDE 配置 文件 ， 开 发 者 在 
“ 微 信 开 发 者 工具 ”上 做 的 任何 配置 都 会 保存 到 这 个 文件 中 。 使 用 开发 IDE 工具 时 ， 开 发 者 
通常 习惯 对 IDE 工具 做 一 些 界 面 颜色 、 编 译 设置 等 个 性 化 的 配置 , 保证 启动 IDE 工具 时 能 够 
启用 这 些 配 置 。 但 是 ， 如 果 开 发 者 在 另外 一 台 计 算 机 上 重新 安装 IDE 工具 ， 往 往 需要 对 这 些 
个 性 化 配置 进行 重新 设置 。 而 project.configjson 文件 就 可 以 简化 这 个 配置 过 程 ， 开 发 者 只 需 
要 在 另外 一 台 计 算 机 的 IDE 工具 中 载 入 原先 的 项 目 代 码 包 ，IDE 工具 就 自动 将 原来 的 个 性 化 
配置 信息 恢复 到 当前 的 IDE 工具 。 
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2.2.1 app.js 


appjs 文件 是 小 程序 项 目的 启动 入 口 文件 ， 文 件 中 的 App(fobject) 函 数 用 
于 注册 一 个 小 程序 ，object 参数 及 功能 说 明 如 表 2-1 所 示 。 


表 2-1 object 参数 及 功能 说 明 
参数 名 类 型 功 能 


了 
回 


onLaunch Function 小 程序 初始 化 ， 打 开 小 程序 时 调用 ， 仅 一 次 
生命 周期 函数 一 一 监听 小 程序 显示 ， 在 小 程序 启动 或 从 后 台 进入 前 台 显 

onShow Function 示 时 调用 

onHide Function | 生命 周期 函数 一 一 监听 小 程序 隐藏 ， 在 小 程序 从 前 台 进入 后 台 时 调用 

onError Function | 错误 监听 函数 ， 在 小 程序 js 脚本 错误 或 API 调用 失败 时 调用 

onPageNotFound Function | 页 面 不 存在 监听 函数 ， 在 小 程序 要 打开 的 页 面 不 存在 时 调用 

其 他 Any 可 以 是 自 定义 的 函数 或 数据 ， 用 this 可 以 访问 


当 用 户 首次 打开 小 程序 ， 触 发 onLaunch( ) 方 法 ， 该 方法 全 局 只 触发 一 次 ， 当 小 程序 初始 
化 完成 后 ， 触 发 onShow( ) 方 法 ,该 方法 用 于 监听 小 程序 显示 ; 当 小 程序 从 前 台 进入 后 台 ( 如 
按 Home 键 ), 触发 onHide( ) 方 法 ,该 方法 用 于 监听 小 程 隐藏 ; 当 小 程序 从 后 台 1 进入 前 台 《〈 如 
再 次 打开 小 程序 )， 触 发 onShow( ) 方 法 ， 当 小 程序 在 后 台 运行 一 定时 间 ， 或 者 系统 资源 占用 
过 高 ， 才 会 被 真正 销毁 。 小 程序 的 生命 周期 如 图 2.3 所 示 。 


唤 起 
[enauner] ee > 和 和 | onShow | | nshor | a ootide | 
运 


图 2.3 小 程序 生命 周期 图 
appjs 文件 常用 代码 格式 如 下 : 
App ({ 


onLaunch: function(options) { 
// 当 小 程序 启动 时 做 一 些 初始 化 操作 
}, 
onShow: function (options) { 
// 当 小 程序 页 面 启动 显示 或 从 后 台 进 入 前 台 时 执行 某 些 操作 
}, 
onHide: function() { 
9 // 当 小 程序 从 前 台 进 入 后 台 时 执行 某 些 操作 
10 }, 
a onError: function(msg) { 
2 // 当 小 程序 出 错 或 api 调用 出 错时 执行 某 些 操作 
区 console.1og (msg) // 当 出 错时 在 控制 台 打 印 msg 信息 


}, 
15 ”// 自 定义 小 程序 全 局 函数 执行 某 些 操作 
16 helloWorld: function(){ 
3 yj console.1log('print helloworld in app.js') 
18 } 
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// 自 定义 小 程序 全 局 数据 
userInfo: {// 定 义 一 个 全 局 变量 userInfo 
userName: ' 张 三 ' 
} 
}) 


下 面 以 在 mdexjs 和 index.wxml 页 面 中 调用 上 述 代码 中 自 定义 的 全 局 函数 和 数据 为 例 介 
绍 自 定义 全 局 函数 和 数据 的 使 用 步骤 。 
(1) 在 indexjs 逻辑 文件 中 获取 应 用 实例 并 调用 自 定义 全 局 函数 和 数据 ， 代 码 如 下 。 


const app = getApp() // 获 取 应 用 实例 
Page({ 
data: { 
fuserName: app.userInfo.userName // 调 用 自 定义 全 局 数据 


}, 
onLoad: function () { 


app.helloWorld() // 调 用 自 定义 全 局 函数 
} 
}) 


(2) 在 index.html 页 面 文 件 中 引用 全 局 数据 ， 代 码 如 下 。 


<text>{ {fuserName}}</text> 


2.2.2 app.json 


appjson 文件 用 于 对 小 程序 进行 全 局 配置 。 例 如 ， 配 置 小 程序 的 页 面 文件 


路 径 、 窗 口 显 示 特 性 、 顶 部 导航 条 、 多 tab 标签 及 网 络 超时 时 间 等 。appjson 
常用 配置 项 及 功能 说 明 如 表 2-2 所 示 。 


表 2-2 appjson 常用 配置 项 及 功能 说 明 


设置 默认 页 面 窗 口 显 示 特 性 


au 性 


j 设置 多 tab 标签 样式 
设置 网 络 超 时 时 间 
设置 是 否 开启 debug 模式 


pages 配置 项 


pages 配置 项 的 类 型 是 String Array( 字 符 串 数组 )， 它 的 每 一 项 都 是 字符 串 ( 用 路 径 名 /文件 
名 格式 表示 ， 文 件 名 不 需要 后 绥 )， 用 来 指定 小 程序 由 哪些 页 面 组 成 。 图 2.2 所 示 目 录 结 构 的 
小 程序 ， 其 appjson 文件 中 pages 配置 项 的 代码 如 下 所 示 : 


{ 
page eh 
"pages/index/index", 
"pages/1ogs/1ogs" 
] 
} 


pages 配置 项 的 第 一 项 指定 的 页 面 是 小 程序 的 初始 页 面 ( 首 页 )， 在 小 程序 中 


bh 新 增 页 面 或 
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减少 页 面 ， 都 需要 在 pages 配置 项 中 进行 相应 的 编辑 修改 。 如 果 pages 配置 项 中 添加 的 页 面 
在 当前 开发 的 小 程序 中 不 存在 ， 经 过 编译 或 保存 后 ， 集 成 开发 环境 会 自动 生成 页 面 存放 目录 
和 相应 的 js、wxml、json 和 wxss 文件 。 例 如 ， 在 上 述 代 码 的 第 3 行 和 第 4 行 之 间 添 加 如 下 
代码 ， 经 编译 或 保存 后 ， 小 程序 的 目录 结构 中 会 自动 生成 news 和 help 页 面 对 应 的 文件 ， 如 
图 2.4 所 示 。 
| 
"pages":[ 

"pages/index/index", 

"pages/news/news", 

"pages/help/help ", 

"pages/1ogs/1ogs" 


Dawmmewnr 


- help 
helpjs 
{) helpjson 
<> help wxml 


wss help WXSS 
» 四 index 
blogs 
vnews 


newsjs 
{) newsjson 
<> News wxml 


ws newWs WXSS 
»* utls 
appjs 
{) appjson 
ws app.WXss 


人 project config json 
图 2.4 新 生成 的 小 程序 目录 结构 


window 配置 项 
window 配置 项 的 类 型 是 Object， 用 来 设置 小 程序 顶部 导航 条 背景 色 、 标 题 文 字 等 )， 
窗 体 标题 和 背景 色 等 。window 配置 项 的 常用 属性 和 功能 说 明 如 表 2-3 所 示 。 


表 2-3 window 配置 项 的 常用 属性 及 功能 说 明 


配置 项 功 能 
设置 导航 条 背景 颜色 ， 默 认 值 为 4000000( 十 六 进 制 颜色 类 
navigationBarBackgroundColor | HexColor 导航 条 攻 景 颜色， 默认 但 为 二 7\ 进 制 颜 名 关 
navigationBarTextStyle Strng 设置 导航 条 标题 颜色 ， 仅 支持 white/black， 默 认 值 为 white 
navigationBarTitleText Object 设置 导航 条 标题 文字 内 容 
ee ea a 设置 窗 体 下 拉 刷 新 或 上 拉 加 载 时 露出 的 背景 色 ， 默 认 值 为 
ee “WY | HE， 需 要 将 enablePullDownRefresh 属性 值 设置 为 tue 
enablePullDownRefresh Boolean 设置 是 否 开启 当前 页 面 的 下 拉 刷 新 ， 默 认 值 为 false 
ee z 扫 iaht， 默 认 值 世 
和 设置 窗 体 下 拉 loading 的 样式 ， 仅 支持 dark/light， 默 认 值 为 


dark， 需 要 将 enablePullDownRefresh 属性 值 设置 为 tue 


本 微 信 小 程序 案例 开发 、 迁 信 


例如 ， 要 实现 图 2.5 所 示 的 显示 效果 ， 可 以 在 appjson 文件 中 使 用 如 下 代码 : 


eeess WeChats 919 


泰州 停车 


图 2.5 ”window 配置 项 效果 图 


{ 

"window": { 
"navigationBarBackgroundColor": "#ff0000", 
"navigationBarTitleText": "泰州 停车 "， 
”navigationBarTextStyle": "white", 
"backgroundColor™": "#00ff00", 
"backgroundTextstyle": "dark", 
"enablePullDownRefresh": true 

} 


FoowamwmmwnP 


0 


tabBar 配置 项 
tabBar 配置 项 的 类 型 是 Object， 用 来 设置 小 程序 tab 标签 的 显示 样式 、tab 切换 时 的 对 应 
页 面 。tabBar 配置 项 的 常用 属性 和 功能 说 明 如 表 2-4 所 示 。 


表 2-4 tabBar 配置 项 的 常用 属性 及 功能 说 明 


配置 项 类 型 功 能 
color HexColor | 设置 tab 上 文字 的 颜色 
selectedColor HexColor | 设置 tab 上 文字 选中 时 的 颜色 
backgroundColor HexColor | 设置 tab 的 背景 
borderStyle String 设置 ttbBar 上 边框 的 颜色 ， 仅 支持 black/white， 默 认 值 为 black 
设置 tabBar tab 的 列表 数组 ， 该 数组 元 素 最 少 2 个 、 最 多 5 个 ， 详 
细 使 用 说 明 如 表 2-5 所 示 


设置 tabBar 的 位 置 ， 仅 支持 bottom( 底 部 )/top( 顶 部 )， 默 认 值 为 bottom 


表 2-5 list 的 常用 属性 及 功能 说 明 


属性 名 类 型 功 能 
pagePath String 设置 tab 对 应 的 页 面 路 径 ， 该 页 面 路 径 必须 在 pages 中 先 定义 


text String 设置 tab 上 的 文字 
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续 表 


iconPath String 


功 能 
设置 tab 上 的 图 片 路 径 ， 不 支持 网 络 医 


片 ， 当 position 为 top 时 ，tab 
上 不 显示 图 片 ， 图 片 大 小 入 40KB， 尺 寸 建议 为 8lpx X81px 


selectedIconPath 


设置 tab 选中 时 显示 的 图 片 路 径 ， 其 他 同 iconPath 


ph 使 用 如 下 代码 : 
seese WeChats 
图 2.6 ”tabBar 配置 项 效果 图 

"pages": // 配 置 小 程序 的 页 面 信息 
"pages/wx/wx", // 小 程序 的 第 一 个 页 面 文件 
"pages/tx1/tx1", 

"pages/find/find", 
"pages/me/me" 

], 

"window": { // 配 置 小 程序 顶部 导航 条 
"navigationBarBackgroundColor": "#000000"， // 导 航 条 背景 颜色 
"navigationBarTitleText":" 微 信 "， // 导 航 条 上 文字 内 容 
"navigationBarTextStyle": "white", // 导 航 条 文字 颜色 
"backgroundColor": "#eeeeee", // 窗 体 下 拉 时 露出 区 域 的 背景 色 
"backgroundTextstyle": "dark", // 窗 体 下 拉 时 露出 的 loading 
"enablePullDownRefresh": true // 开 启 页 面 的 下 拉 刷 新 

]} 

"tabBar": { // 配 置 小 程序 底部 tabBar 样式 
"color":"#000000", // 未 选择 tabBar 上 tab 时 文字 的 颜色 
"selectedColor":"#llcd6e", // 选 择 了 tabBar 上 tab 时 文字 的 颜色 
Te // 底 部 tabBar 上 tab 的 配置 数组 

"pagePath" : "pages/wx/wzx", // 单 击 tab 后 默认 打开 的 小 程序 页 面 
"text": " 微 信 "， //tab 上 显示 的 内 容 
"iconPath": "images/wxall.png", // 未 选择 tab 时 的 默认 图 标 


"selectedIconPath": "images/bwxal1.png"  // 选 择 tab 时 的 图 标 


]} 1{ 
"pagePath": "pages/txl1/txl1", 
"text": "通讯 录 "， 
"iconPath": "images/wxmsg.png", 
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28 "selectedIconPath": "images/bwxmsg.png" 
29 }, 

30 上 

3 "pagePath": "pages/find/find", 

32 "text": "发 现 "， 

33 "iconPath": "images/wxfind.png", 

34 "selectedIconPath": "images/bwxfind.png" 
3 }, 

36 { 

337 "pagePath": "pages/me/me", 

38 mex Rn 

39 "iconPath": "images/wxset.png", 

40 "selectedIconPath": "images/bwxset.png" 
4 }] 

42 } 

As 


需要 注意 的 是 : 编写 appjson 文件 时 不 可 以 在 文件 中 添加 任何 注释 ， 上 述 代码 添加 的 注 
释 是 为 了 方便 读者 理解 相关 配置 属性 的 功能 。 

networkTimeout 配置 项 

networkTimeout 配置 项 的 类 型 是 Object， 用 来 设置 小 程序 网 络 请 求 的 超时 时 间 ， 单 位 为 
ms， 需 要 配合 各 个 网 络 请 求 使 用 。networkTimeout 配置 项 的 常用 属性 及 功能 说 明 如 表 2-6 


所 示 。 
表 2-6 networkTimeout 配置 项 的 常用 属性 及 功能 说 明 
配置 项 功 能 
request 设置 普通 https 请 求 (wx.request) 的 超时 时 间 ， 默 认 值 为 60000 
connectSocket 设置 WebSocket 通信 (wx.connectSockeb 的 超时 时 间 ， 默 认 值 为 60000 
uploadFile 设置 上 传 文件 (wx.uploadFile) 的 超时 时 间 ， 默 认 值 为 60000 
downloadFile 设置 下 载 文件 (wx.downloadFile) 的 超时 时 间 ， 默 认 值 为 60000 


例如 ， 要 设置 https 和 下 载 文件 超时 请 求 时 间 为 10s， 可 以 在 appjson 文件 中 使 用 如 下 代码 : 


{ 

"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 

} 

上 


am 必 wm 


debug 配置 项 

debug 配置 项 的 类 型 是 Boolean， 用 来 在 开发 者 工具 中 开启 debug 模式 〈 默 认 值 为 false， 
表示 不 开启 )。 在 开发 者 工具 的 控制 台面 板 ， 调 试 信息 以 info 的 形式 列 出 ， 信 息 包含 Page 的 
注册 、 页 面 路 由 、 数 据 更 新 及 事件 触发 等 ， 这 些 信 息 可 以 帮助 开发 者 快速 定位 一 些 常见 的 问 
题 。 调 试 信息 的 显示 效果 如 图 2.7 所 示 。 回 j 回 


2.2.3 app-:wxss 


i 
app wxss 文件 是 整个 小 程序 的 公共 样式 , 在 该 文件 中 定义 的 样式 可 以 在 这 回 
个 小 程序 的 所 有 页 面 使 用 。 在 实际 应 用 开发 时 ， 用 于 定义 小 程序 页 面 的 样式 文 。 2 
件 有 以 下 两 种 : 
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[EY Console Sources Network Securty A 
© top v | Filter 


App: onLaunch have been invoked 

App: onShow have been invoked 
Register Page: pages/wx/wx 

Register Page: pages/txl/txl 
Register Page: pages/find/find 
Register Page: pages/me/me 

On app route: pages/wx/wx 

Update view with init data 
pages/wx/wx: onLoad have been invoked 
pages/wx/wx: onShow have been invoked 


Invoke event onReady in page: pages/wx/wX 


图 2.7 debug 显示 效果 


(1) 全 局 样式 ， 定义 在 app.wxss 中 的 样式 为 全 局 样式 ， 可 以 作用 于 小 程序 的 每 一 个 
页 面 ; 
(2) 局 部 样式 : 在 pages 文件 夹 中 的 wxss 文件 中 定义 的 样式 为 局 部 样式 ， 只 作用 于 对 应 
页 面 。 在 局 部 样式 文件 中 定义 的 样式 选择 器 ， 如 果 与 app.wxss 文件 中 定义 的 样式 选择 器 同 
名 ， 则 会 覆盖 app.wxss 文件 中 定义 的 样式 选择 器 。 


OO 2.3 小 程序 的 页 面 描述 文件 


接触 过 Web 前 端 网 页 开发 的 读者 都 知道 ， 网 页 编程 大 多 采用 HTML+CSS+JavaScript 组 
合 ,， 其 中 HTML (Hyper Text Markup Language， 超 文本 链接 标示 语言 ) 用 来 描述 Web 前 端 网 
页 的 结构 、CSS (Cascading Style Sheet， 层 登 样 式 表 ) 用 来 描述 网 页 的 呈现 样式 、JavaScript 
用 来 实现 页 面 和 用 户 的 交互 逻辑 。 同 样 ,小 程序 的 页 面 描述 结构 与 Web 前 端 页 面 类 似 ,WXML 
类 似 HTML 的 角色 ，WXSS 类 似 CSS 的 角色 ,与 JavaScript 的 角色 一 样 。 所 以 小 程序 的 每 个 
页 面 描述 文件 通常 由 页 面 结构 文件 〈 文 件 后 组 名 为 wxml)、 页 面 样式 文件 〈 文 件 后 绥 名 为 
wxss)、 页 面 逻 辑 文 件 (文件 后 级 名 为 js》 和 页 面 配置 文件 (文件 后 级 名 为 json) 等 四 个 文件 
组 成 。 页 面 结构 文件 (wxml)〉 和 页 面 样式 文件 (wxss) 构成 了 小 程序 框架 的 视图 层 ， 小 程序 
在 逻辑 层 处 理 数 据 后 发 送 给 视图 层 展 现 出 来 ， 同 时 逻辑 层 也 接收 视图 层 的 事件 反馈 。 


2.3.1 页 面 结构 文件 (WXML ) 


WXML 是 小 程序 框架 设计 的 一 套 类 似 HTML 的 标签 语言 ， 它 可 以 结合 基础 组 件 、 事 件 
系统 构建 出 页 面 的 结构 ， 即 页 面 结构 文件 (wxml 文件 )。 图 2.3 所 示 小 程序 目录 结构 图 中 的 
help.-wxml 和 news-wxml 文件 就 是 该 小 程序 的 页 面 结构 文件 。 页 面 结构 文件 的 编写 方式 与 
HTML 类 似 ， 可 以 由 视图 容器 类 组 件 、 基 础 内 容 类 组 件 、 表 单 类 组 件 、 导 航 类 组 件 、 多 媒体 
类 组 件 、 地 图 类 组 件 、 画 布 类 组 件 的 标签 和 属性 构成 。 

WXML 具有 数据 绑 定 、 列 表演 染 、 条 件 泻 染 、 模 板 及 事件 绑 定 等 功能 。 例 如 ， 默 认 创 建 
的 小 程序 项 目 中 的 logs 页 面 结构 文件 〈logs-wxml) 的 代码 如 下 : 


1 <view class="container log-list"> 
2 <block wzx:for="{{10gs}}" wx:for-item="]l0g"> 


微 信 小 程序 案例 开发 “ 苞 f 


3 <text class="1og-item">{f{findex+1}}-.{{f1log}}</text> 
4 </block> 
5 </view> 


上 述 代 码 使 用 view 组 件 来 控制 展现 页 面 内 容 ， 通 过 block 组 件 、text 组 件 实现 页 面 数据 
的 绑 定 和 列表 演 染 。 加 列国 

贺 数据 绑 定 

页 面 结构 文件 中 显示 的 内 容 可 以 是 静态 的 ， 也 可 以 是 动态 的 。 页 面 结构 文 ， 
件 中 的 动态 数据 均 来 自 对 应 页 面 迎 辑 文件 中 Page 的 data 对 象 。 在 实际 应 用 开 
发 中 ， 因 为 应 用 场景 的 不 同 ， 数 据 绑 定 的 使 用 形式 和 对 页 面 起 到 的 作用 也 是 不 
一 样 的 ， 下 面 用 具体 的 应 用 代码 阐述 。 

(1) 作用 于 页 面 内 容 。 

例如 ， 下 列 代码 第 3 行 用 text 组 件 控制 “李开复 ”在 页 面 上 呈现 ， 而 在 实际 应 用 中 ， 类 
似 这 样 的 姓名 应 该 是 根据 登录 用 户 姓 名 的 改变 而 改变 ， 也 就 是 text 组 件 中 控制 显示 的 姓名 内 
容 应 该 是 可 以 动态 改变 的 ， 所 以 就 需要 使 用 数据 绑 定 来 实现 。 下 列 代码 第 6 行 的 {{name}} 格 
式 用 “ 双 大 括号 ”将 name 变量 包 起 来 ， 就 是 实现 了 数据 绑 定 功 能 ， 直 接 将 页 面 逻辑 文件 中 
定义 的 data 对 象 中 的 name 变量 作用 于 页 面 结构 文件 , 当 name 变量 的 值 发 生 改 变 , 页 面 上 显 
示 的 内 容 也 会 跟着 改变 。 


<l—— WX- WML 一 一 > 
<View> 
欢迎 ”<text> 李 开 复 </text> ”登录 本 系统 ! 
</View> 
<View> 
欢迎 <text>{ {name}}</text> 登录 本 系统 ! 


</View> 


2 3 


ono 


与 上 述 页 面 结构 文件 对 应 的 页 面 逻 辑 文 件 代码 如 下 : 


//wx.js 
Page({ 
data: {// 页 面 的 初始 数据 
name:" 李 开 复 " 
} 
1) 


auw 必 wm 


(2) 作用 于 组 件 属 性 。 

在 页 面 结构 文件 中 定义 组 件 时 ， 往 往 需要 通过 设 定 组 件 属 性 来 定义 组 件 在 页 面 上 呈现 的 
效果 。 例 如 ， 下 列 代码 第 2 行 用 style 属性 定义 view 组 件 的 背景 色 ， 第 3 行 用 class 属性 定义 
view 组 件 的 背景 色 。 第 2 行 代码 的 {fcolor}} 和 第 3 行 代码 的 {{id}} 都 是 在 组 件 属性 中 使 用 了 
数据 绑 定 。 

和 <!I—= WX WZNL ==> 


2 <view style='background:{{color}}'> 直 接 用 style 定义 背景 色 </view> 
3 <view class='bcolor{ {id}}'> 用 样式 定义 背景 色 </view> 


与 上 述 页 面 结构 文件 对 应 的 页 面 逻 辑 文件 代码 如 下 : 


Le is 
公 Page ({ 
3 data: { 
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color: "yellow", 
dey 
} 
}) 


ao 心 


与 上 述 页 面 结构 文件 对 应 的 页 面 样式 文件 代码 如 下 : 


/*WX.WXSS */ 
.bcolorl{ 
background: red; 

} 

.bcolor2{ 
background: yellow; 
号 


aawmmewmn 


当 wxjs 文件 中 的 id 修改 为 1 时 ，wx.wxml 页 面 对 应 位 置 的 背景 色 为 red; 当 wxjs 文件 
中 的 id 修改 为 2 时 ，wx.wxml 页 面 对 应 位 置 的 背景 色 为 yellow。 

(3) 作用 于 控制 组 件 。 

在 页 面 显 示 时 , 通常 会 出 现 满足 某 个 条 件 时 , 页 面 结构 文件 中 定义 的 组 件 才 会 呈现 出 来 ， 
否则 会 隐藏 该 组 件 的 情况 。 例 如 ， 下 列 代码 使 用 了 wx:if 进行 条 件 泻 染 ， 当 页 面 逻辑 文件 中 
定义 的 flag 为 true 时 ，view 组 件 会 显示 在 页 面 上 ， 和 否则 不 会 显示 。 

1 <!-— WX.Wwxml --> 
2 <view wx:if='{{flag}}'>flag 为 true 显示 ， 否 则 隐藏 。{ {flag}}</view> 


与 上 述 页 面 结构 文件 对 应 的 页 面 逆 辑 文件 代码 如 下 : 


A 
Page ({ 
data: { 
flag: true 
} 
}) 


au 必 wm 


(4) 进行 简单 的 运算 。 

在 页 面 结构 文件 中 使 用 数据 绑 定 进行 运算 主要 包括 以 下 几 种 方式 : 

Q 三 元 运算 。 

前 面 介绍 了 使 用 wx:if 条件 渲染 实现 控制 组 件 的 显示 或 隐藏 ， 在 WXML 中 还 可 以 使 用 
hidden 属性 控制 组 件 的 显示 或 隐藏 ， 下 列 代码 第 2 行 表示 当 flag 值 为 tre 时 ，hidden 属性 值 
为 tue， 则 view 组 件 就 会 隐藏 。 


0 
2 <view hidden="{{flag ? true : false}}">Hidden</view> 


与 上 述 页 面 结构 文件 对 应 的 页 面 逻 辑 文件 代码 与 前 面相 似 ， 限 于 篇 幅 不 再 袭 述 。 

@ 逻辑 运算 。 

除了 应 用 三 元 运算 符 外 ， 数 据 绑 定 也 可 以 进行 普通 的 逻辑 运算 。 例 如 ， 页 面 结构 文件 代 
码 如 下 : 


一 二 和 
2 <view wx:if="{{length > 5}}">length 大 于 5! </view> 


与 上 述 页 面 结构 文件 对 应 的 页 面 逻辑 文件 代码 如 下 : 


由 微 信 小 程序 案例 开发 “区 


YA 

4 Page({ 

总 data: { 

4 length: 6 
5 } 

6) 


上 述 代 码 表示 当 length 的 值 大 于 5 时 ， view 组 件 显示 “length 大 于 5!1”。 

@ 算术 运算 和 字符 串 运算 。 

在 组 件 中 使 用 数据 绑 定 形式 也 可 以 进行 简单 的 算术 运算 和 字符 串 运算 。 例 如 ， 页 面 结构 
文件 代码 如 下 : 
XI We wm 一 二 > 


这 <view>{{a - b}} + {{c}} + d </view> 
3 <view>{{"hello, " + name}}</view> 


与 上 述 页 面 结构 文件 对 应 的 页 面 迎 辑 文件 代码 如 下 : 


//wx.js 
Page ({ 
data: {// 页 面 的 初始 数据 


novop 
WD 


name : ' 张 蔚蓝 " 
} 
0 3}) 


Fow~wamwmmwmNnb 


上 述 代码 运算 后 的 输出 结果 如 图 2.8 所 示 。 

@ 数据 路 径 运算 。 

为 了 实现 对 复杂 类 型 数据 的 引用 ， 数 据 绑 定 形式 可 以 进行 数据 路 径 运算 。 例 如 ， 页 面 结 
构 代 码 如 下 : 


:0 < WE WN ==> 
2 <view>{{person.id}}, {{person.name}},{{dept[0]}} 系 </view> 


与 上 述 页 面 结构 文件 对 应 的 页 面 迎 辑 文件 代码 如 下 : 


a 

Page({ 
3 data: {// 页 面 的 初始 数据 
4 person:{ 

Ss id : '0909001°', 
6 name: "张三丰 " 

| }, 

8 dept:[' 计 算 机 ', ' 数 学 '] 
9 } 

10 }) 


上 述 代码 运算 后 的 输出 结果 如 图 2.9 所 示 。 
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0909001 , 张三丰 ,计算 机 系 


图 2.8 算术 运算 和 字符 串 运算 显示 效果 图 2.9 数据 路 径 运 算 显示 效果 
园 列表 泻 妆 
页 面 结构 文件 中 显示 的 内 容 可 以 是 在 页 面 罗 辑 文件 中 定义 的 普通 变量 ， 
也 可 以 是 数组 。 不 管 是 普通 变量 ， 还 是 数组 ， 都 可 以 通过 前 面 介绍 的 简单 数 
绑 定 实现 数 据 内 容 在 页 面 上 的 显 显示 。 但 是 ， 上 站 


回 ; 


人 a 小 星 序 上 dl 


列表 演 染 的 使 用 场景 大 多 为 商品 展现 、 购 物 车 和 内 容 收藏 等 需要 重复 显示 数据 内 容 的 页 
面 。 这 类 需要 重复 显示 的 数据 往往 保存 在 小 程序 的 数组 列表 中 ， 这 种 数组 列表 的 展示 其 实 就 
是 用 for 循环 来 循环 生成 相对 应 的 列表 项 布局 ， 即 用 wx:for 重复 泻 染 组 件 实现 此 项 功能 。 例 
如 ， 要 在 页 面 上 显示 图 2.10 所 示 的 商品 列表 显示 效果 ， 可 以 在 页 面 结构 文件 中 用 如 下 代码 : 


e000r WeChats 9:25 


商品 列表 


图 2.10 ”列表 泻 染 应 用 (1) 


<1== 小 LW . ==> 

<view wx:for="{{shopName}}"> 
{{index}}: {{item}} 

</view> 


心 wN 


上 述 代码 第 2 行 用 wx:for 控制 属性 绑 定 了 shopName 数组 ， 该 数组 的 当前 元 素 下 标 变量 
名 默认 为 index、 当 前 元 素 变量 名 默认 为 item。 第 3 行 代码 用 {{index}} 绑 定 当前 元 素 下 标 ， 
用 {fitem}} 绑 定 当前 元 素 在 view 组 件 中 显示 。 与 上 述 页 面 结构 文件 对 应 的 页 面 逻辑 文件 代码 
如 下 : 


1 i 
Page({ 
data: { 
shopName: [' 衣 服 ',' 毛 巾 ',' 手 套 ',' 裤 子 '] 
1 
}) 


另外 ， 使 用 wx:for-item 可 以 指定 数组 当前 元 素 的 变量 名 ， 使 用 wx:for-index 可 以 指定 
数组 当前 元 素 下 标的 变量 名 。 前 面 商品 列表 页 面 的 结构 文件 可 以 修改 为 如 下 代码 : 


2 
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=n 
<view wzx:for="{{shopName}}" wzx:for-index="itemIndex" wx:for-item= 
itemName"> 
{{itemIndex}}: 1{itemName}} 
</view> 


心 w as 


在 实际 应 用 开发 中 ，wx:for 要 么 配合 view 使 用 ， 要 么 配合 block 使 用 。 这 两 种 使 用 方式 
的 区 别 在 于 配合 block 使 用 时 block 不 会 被 泻 染 ， 而 配合 view 使 用 时 则 会 多 泻 染 一 次 ， 但 是 
最 终 呈 现 效 果 是 一 样 的。 例如 ， 在 页 面 上 显示 图 2.11 所 示 的 电话 列表 显示 效果 ， 可 以 在 页 面 
结构 文件 中 使 用 如 下 代码 : 


e000e WeChats 


图 2.11 列表 泻 染 应 用 (2) 


1 <-= trl wn ==> 

之 <block wx:for="{{infoList}}" wx:for-index="telIndex" wx:for-item= 
"telItem" wx:key="phone"> 

3 <view> 

4 <view style='background:yellow'>{{ telIndex }}</view> 

5 <view> 电 话 : {{ telItem.phone}}</view> 

6 <view> 用 途 : {{ telItem.name}}</view> 

达 </view> 

8 </block> 


上 述 代码 第 2 行 增加 了 wx:key 控制 属性 , 官方 文档 的 解释 是 : 如 果 数 组 列表 中 项 目的 位 
置 会 动态 改变 或 者 有 新 的 项 目 添加 到 列表 中 ， 并 希望 列表 中 的 项 目 保持 自身 的 特征 和 状态 ， 
就 需要 使 用 wx:key 来 指定 列表 中 项 目的 唯一 标识 符 。 与 上 述 代码 对 应 的 页 面 多 辑 文件 代码 
如 下 : 


1 //pages/txl/txl1.js 
2 Pagel({ 

六 data: { 

4 infoList: [{ 

5 phone: 110, 

6 name: "报警 电话 " 
风 2 

8 phone: 119, 

9 name: "火警 电话 " 
10 Eral 

11 phone: 120, 

12 name: "急救 电话 " 
13 }] 

14 } 


区 }) 
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图 条 件 泻 

wx 让 在 小 程序 中 用 来 进行 条 件 泻 染 ， 即 控制 是 否 需 要 演 染 代码 指定 的 组 
件 ， 它 的 功能 与 Java、C 等 高 级 语言 中 让 的 条 件 判断 一 样 ， 还 可 以 与 wx:elif、 当 
wx:else 等 配合 使 用 .例如 , 下列 页 面 结构 代码 表示 根据 week 的 值 判断 吃 什么 


< At Wn > 

<view> 今 天 吃 什 么 ? </view> 

<view wx:if="{{week == 1}}"> 
星期 { {week}}: 饺子 

</view> 

<view wx:elif="{ {week == 2}}"> 
星期 { {week}}: 米饭 

</view> 

<View wx:elif="{{week == 3}}"> 

10 ”星期 {{week}}: 馒头 

11 </view> 

12 <view wx:elif="{{week == 4}}"> 

13 星期 { {week}}: 面条 

14 </view> 

15 <view wx:elif="{ {week == 5}}"> 

16 ”星期 {{week}}: 稀饭 

17 </view> 

18 <view wx:else> 

19 ”星期 {{week}}: 西餐 

20 </view> 


ownamwmmwnb 


与 上 述 页 面 结构 文件 对 应 的 页 面 多 辑 文件 代码 如 下 : 


1 //pages/find/find.js 
Page({ 
| data: { 
4 week: Math.floor(Math.random() * 7 + 1) 
5 } 
et | 
因为 wx:if 是 一 个 控制 属性 ， 所 以 在 页 面 结构 文件 代码 中 需要 将 它 添加 到 一 个 如 上 例 所 


示 的 view 组 件 标签 上 。 如 果 需 要 一 次 性 控制 多 个 组 件 标签 ， 就 需要 使 用 block 标签 ， 将 多 个 
组 件 标 签 包装 起 来 ， 并 使 用 wx: 站 控制 属性 。 例 如 ， 如 果 上 例 中 随机 产生 的 week 值 二 5， 则 
分 别 用 view 组 件 显示 “面条 ”和 “西餐 ” 如 果 week 值 宇 3, 则 分 别 用 view 组 件 显示 “馒头 ” 
和 “稀饭 ” 否则 显示 “饺子 ”和 “米饭 ”。 


< == eat -wml=—=> 

<block wx:if="{ {week>=5}}"> 
<view> 面条 </view> 
<view> 西餐 </view> 

</block> 

<block wx:elif="{ {week>=3}}"> 
<view> 馒头 </view> 
<view> 稀 饭 </view> 

9 </block> 

10 <block wzx:else> 

3 <view> 饺子 </view> 

12 <view> 米饭 </view> 

13 </block> 
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2.3.2 页 面 样式 文件 ( WXSS ) 
WXSS 是 一 套 样 式 语言 ， 用 于 描述 WXML 的 组 件 样式 ， 即 页 面 样式 文件 国 Rs 由 国 


(.wxss)。 也 就 是 通过 页 面 样式 文件 决定 页 面 结构 文件 中 的 组 件 应 该 怎么 显示 。 
WXSS 基本 沿用 了 CSS 的 大 部 分 特性 ， 也 新 增 了 尺寸 单位 和 样式 导入 两 个 方 和 


面 的 内 容 ， 这 些 内 容 将 在 本 教程 第 3 章 中 详细 介绍 。WXSS 支持 的 选择 器 及 功 四 一 到 


能 说 明 如 表 2-7 所 示 。 人 
表 2.7 WXSS 样式 选择 器 及 功能 说 明 
选择 器 样 。 例 功能 描述 
class [ar | 样式 作用 于 所 有 拥有 class="intro" 的 组 件 
#d 样式 作用 于 所 有 拥有 id="firstname” 的 组 件 
element | view | 样式 作用 于 所 有 view 组 件 


element, element 样式 作用 于 view 组 件 和 checkbox 组 件 
:after 在 view 组 件 后 面 插入 内 容 
:before 在 view 组 件 前 面 插入 内 容 


-class 选择 器 
页 面 结 构 文 件 selectorwxml 中 的 代码 如 下 : 


<1 electorswzml > 
2 <button class="but classl"> 人 确定 </button> 
3 <button class="but_classl"> 取 消 </button> 


与 上 述 页 面 结构 文件 对 应 的 页 面 样式 文件 代码 如 下 : 


/* selector.wxss */ 
.but classl{ 
margin: 10px; 
background: #22fbee; 
4 


MAODP 


上 述 代码 中 的 “确定 ”和 “取消 ”按钮 都 使 用 class 属性 引用 .but_classl 选择 器 来 定义 按 
钮 的 样式 。 
拓 d 选择 器 
页 面 结构 文件 selectorwxml 中 的 代码 如 下 : 
1 <!-- selector.wxml --> 


2 <button class="button class2"> 确 定 </button> 
3 <button id="button class3" class="button class2"> 取 消 </button> 


与 上 述 页 面 结构 文件 对 应 的 页 面 样式 文件 代码 如 下 : 


/* selector.wxss */ 
.button class2 { 
margin-top: 10px; 
margin-left: 10px; 
margin-right: 10px; 
background: #e2f; 

} 

#button class3 { 
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9 background: greenyellow; 
LO 


上 述 代码 中 的 “确定 ”按钮 使 用 了 class 属性 引用 .button_class2 选择 器 来 定义 按钮 的 样 
式 ,“ 取 消 ” 按 钮 既 使 用 了 class 属性 引用 .button_class2 选择 器 ， 也 使 用 了 id 属性 引用 
#button_class3 选择 器 来 定义 按钮 的 样式 。 
element 选择 器 
页 面 结构 文件 selectorwxml 中 的 代码 如 下 : 
<!-- selector.wxml -一 > 
<button> 确 定 </button> 


<button> 取 消 </button> 
<button> 退 出 </button> 


必 mw 


与 上 述 页 面 结构 文件 对 应 的 页 面 样式 文件 代码 如 下 : 


/* selector.wxss */ 

button { 
background: greenyellow; 
margin-left: 10px; 
margin-right: 10px; 
margin-top: 10px; 

} 


amcmwn 


上 述 代码 中 的 “确定 ”“ 取 消 ” 和 “退出 ”按钮 均 使 用 了 button 选择 器 来 定义 按钮 的 样式 。 
页 面 结构 文件 selectorwxml 中 的 代码 如 下 : 


<1— selector wazml 一 > 
<view> 欢 迎 登 录 本 系统 ! </view> 
<button> 确 定 </button> 
<button> 取 消 </button> 
<button> 退 出 </button> 


MARAODP 


与 上 述 页 面 结构 文件 对 应 的 页 面 样式 文件 代码 如 下 : 


/* selector.wxss */ 

button, view { 
background: greenyellow; 
height: 50px; 
margin-left: 10px; 
margin-right: 10px; 
margin-top: 10px; 
display: flex; 
align-items: center; 
justify-content: center; 

: 


PoWoAnAoONp 


Po 


上 述 代 码 中 的 button 和 view 选择 器 共用 一 组 相同 的 样式 ， 所 以 页 面 显示 时 view 组 件 和 
button 组 件 的 样式 完全 一 样 。 显 示 效 果 如 图 2.12 所 示 。 

:after 和 ::before 选择 器 

在 前 面 示例 的 页 面 样式 文件 〈selectorwxss) 中 添加 如 下 代码 : 


中 微 信 小 程序 案例 开发 ”过 们 


} 


content: 
} 


oamwmwewmnrP 
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图 2.12 选择 器 应 用 (1) 


view: :aftert{ 
color: red; 
content: "马云 !" 


button: :beforet{ 
color: red; 


"马云 ，" 


第 1 行 代码 表示 在 view 组 件 后 面 插入 “红色 字体 的 马云 ”， 第 2 行 代码 表示 在 button 组 
件 前 面 插 入 “红色 字体 的 马云 ”” 显 示 效果 如 图 2.13 所 示 。 


图 2.13 选择 器 应 用 (2) 


2.3.3 ”页面 逻辑 文件 (JavaScript ) 


微 信 小 程序 的 逻辑 层 通常 由 App( ) 注 册 、Page( ) 注 册 、JavaScript 和 框架 
API 组 成 。 逻 辑 层 的 实现 就 是 用 JavaScript 语言 编写 各 个 页 面 的 js 文件 。 由 于 
JavaScript 逻辑 文件 是 运行 在 纯 JavaScript 引擎 中 ， 而 并 非 运 行 在 浏览 器 中 ， 因 
此 一 些 浏 览 器 提供 的 特有 对 象 ， 如 document、window 等 在 小 程序 中 都 无 法 使 
]; 同 理 ， 一 些 基 于 document、window 的 框架 ， 如 jQuery 和 Zepto 也 不 能 2.3.3 


小 程序 中 使 用 。 


在 小 程序 启动 的 外 


发 者 编写 的 微 信 小 程序 的 所 有 代码 最 终 会 打包 成 一 份 JavaScript 文件 ， 并 
候 运 行 ， 直 到 小 程序 销毁 。 


29 


妨 9 第 2 章 小 程序 结构 分 析 


用 App( ) 函 数 注册 小 程序 

微 信 小 程序 项 目 根 文件 夹 下 的 appjs 文件 中 有 一 个 App( ) 方 法 ， 该 方法 有 且 仅 有 一 个 ， 
用 来 注册 小 程序 。App() 方 法 接受 一 个 object 参数 , 用 于 指定 小 程序 的 生命 周期 函数 等 。 这 部 
分 内 容 已 经 在 本 章 第 2 节 介绍 过 ， 不 再 歼 述 。 

用 Page( ) 函 数 注册 页 面 

微 信 小 程序 中 使 用 Page( ) 函 数 进行 页 面 注册 ， 与 App( ) 函 数 类 似 ，Page( ) 函 数 接受 一 个 
object 类 型 参数 ， 可 以 用 于 指定 页 面 的 初始 化 数据 、 生 命 周 期 回调 函数 和 事件 处 理 函数 等 。 
object 参数 及 功能 说 明 如 表 2-8 所 示 。 


表 2-8 object 参数 及 功能 说 明 


参数 名 类 型 功 能 
data Object 页 面 的 初始 化 数据 
onLoad Function 生命 周期 函数 ， 用 于 监听 页 面 加 载 
onShow Function 生命 周期 函数 ， 用 于 监听 页 面 显示 
onReady Function 生命 周期 函数 ， 用 于 监听 页 面 初次 演 染 完成 
onHide Function 生命 周期 函数 ， 用 于 监听 页 面 隐藏 
onUnload Function 生命 周期 函数 ， 用 于 监听 页 面 卸 载 
onPullDownRefresh Function 监听 用 户 下 拉动 作 
onReachBottom Function 页 面 上 拉 触 底 事 件 的 处 理 函 数 
onShareAppMessage Function 用 户 单 击 右上 角 转 发 
onPageScroll Function 页 面 滚动 触发 事件 的 处 理 函 数 
onResize Function 页 面 尺寸 改变 时 触发 
onTabItemTap Function 当前 是 tab 页 时 ， 单 击 tab 时 触发 
其 他 Any 可 以 是 自 定义 的 函数 或 数据 ， 用 this 可 以 访问 


(1) 初始 化 页 面 数据 。 

初始 化 页 面 数据 位 于 Page( ) 函 数 的 data 中 ， 它 是 页 面 第 一 次 演 染 时 使 用 的 初始 数据 。 页 
面 加 载 时 ，data 会 以 Json 字符 串 的 格式 由 逻辑 层 传 到 视图 层 ， 视 图 层 可 以 通过 WXML 对 数 
据 进行 绑 定 ， 获 得 data。 因 此 ，data 中 的 数据 必须 是 字符 串 、 数 值 、 布 尔 值 、 对 象 和 数组 等 
可 以 转换 成 Json 格式 的 数据 类 型 。 例 如 ， 下 列 代码 在 data 中 定义 了 某 职 工 的 相关 信息 : 


1 //workinfo.js 

Page({ 

多 data: { 

4 ol ee :el // 数 组 类 型 
5 name: ' 李 小 明 '， // 字 符 串 类 型 
6 birthday: new Date ("1992-12-12")，// 日 期 类 型 
flag: true, // 布 尔 类 型 
8 salary: 3452.34, // 数 值 类 型 
9 office: // 对 象 类 型 
10 workNo: "09090001'"， 

i workTel: '0523-543033333', 

I workAddress: ' 教 育 技术 楼 ' 

13 } 

14 } 

Sm 


为 了 小 程序 页 面 上 显示 图 2.14 所 示 效 果 ， 可 以 在 对 应 的 页 面 结构 文件 中 使 用 如 下 代码 : 
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<!-- workinfo.wxml 一 
<View> 姓 名 : { {name}}< 
<view wx:if='f{fflag} 
<View> 工 号 : { {office. 


<view> 电 话 : { {office. 
<view> 地 址 : { {office. 


oooODNP 


> 


<view> 编 号 : {{id[2]}}</view> 


/view> 


<view> 出 生日 期 : { {birthday}}</view> 


}'> 婚 否 : 已 婚 </view> 


<view wx:else> 婚 否 : 未 婚 </view> 


WorkNo} }</view> 
workTel} </view> 
workAddress}}</view> 


编号 : 2 
姓名 : 李 小 明 
出 生日 期 : 1992-12-12T00:00:00.000Z 


婚 否 : 已 婚 
工 号 : 09090001 
电话 : 0523-543033333 


j 


(2) 页 面 生命 周期 。 


也 址 : 教育 技术 楼 


图 2.14 data 应 用 示例 


当 小 程序 注册 完成 后 加 载 页 面 ， 并 触发 onLoad( ) 方 法 ， 当 页 面 载 入 后 触发 onShow( ) 方 
法 ， 并 显示 页 面 ， 初 次 显示 页 面 会 触发 onReady( ) 方 法 ， 泻 染 页 面 元 素 和 样式 ， 一 个 页 面 只 
会 调用 一 次 该 方法 ， 当 小 程序 从 前 台 进 入 后 台 〈 如 按 Home 键 ) 运行 或 跳 转 到 其 他 页 面 时 ， 
触发 onHide( ) 方 法 ; 当 小 程序 从 后 台 进 入 前 台 运 行 或 重新 进入 页 面 时 , 触发 onShow( ) 方 法 ; 
当 使 用 重 定向 方法 wx.redirectTo( ) 或 关闭 当前 页 返回 上 一 页 方法 wx.navigateBack( ) 时 ， 触 发 
onUnload( ) 方 法 。 页 面 的 生命 周期 如 图 2.15 所 示 。 


人 
页 面 知 载 


| 
[ass | -ES [ms |] -Pet > onReady 


(3) 页 面 事件 处 理 函 数 。 
GD onPullDownRefresh( ) 


1 从 
页 面 隐藏 页 面 显示 
省 


2.15 页面 生命 周期 


函数 用 于 监听 用 户 下 拉 刷 新 事件 。 用 户 下 拉 页 面 时 触发 该 事件 。 


在 appjson 文件 中 的 window 选项 进行 全 局 配置 ,可 以 让 小 程序 所 有 页 面 下 拉 时 触发 该 事件 ; 


对 某 个 页 面 对 应 的 json 文件 
该 事件 。 配 置 代码 如 下 : 


的 window 选项 进行 配置 ， 可 以 在 小 程序 当前 页 面 下 拉 时 触发 


"enablePullDownRefresh": true 
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@ onReachBottom( ) 函 数 用 于 监听 用 户 上 拉 触 底 事件 。 用 户 上 拉 页 面 到 底部 时 触发 该 事 
件 。 可 以 在 appjson 或 页 面 对 应 的 json 文件 中 的 window 选项 中 配置 触发 距离 
onReachBottomDistance。 但 在 触发 距离 内 滑动 页 面 ， 该 事件 只 会 被 触发 一 次 。 

@ onShareAppMessage( ) 函 数 用 于 监听 用 户 单 击 页 面 内 转发 按钮 (<button> 组 件 
open-type="share") 或 右上 角 转 发 按钮 回国 的 行为 ， 并 自 定义 转发 内 容 。 注 意 : 只 有 定义 了 此 
事件 处 理 函 数 ， 单 击 右 上 角 菜 单 转发 按钮 ， 页 面 底部 才 会 列 出 “转发 ”菜单 。 显 示 效 果 如 
图 2.16 所 示 。 

@ onPageScroll( ) 函 数 用 于 监听 用 户 滑动 页 面 事件 。 用 户 滑动 页 面 时 触发 该 事件 ， 该 方 
法 可 以 使 用 scrollTop 属性 返回 页 面 在 垂直 方向 已 滚动 的 距离 〈 单 位 px)。 

@ onResize( ) 函 数 用 于 监听 页 面 尺寸 改变 事件 。 页 面 显示 区 域 尺寸 改变 或 屏幕 旋转 时 

@ onTabItemTap( ) 函 数 监听 单 击 tab 事件 。 当 用 户 单 击 页 面 tab 时 触发 该 事件 。 但 是 实 
际 开发 中 ， 对 于 在 小 程序 模拟 器 上 运行 小 程序 ， 进 行 tab 切换 并 不 会 触发 该 事件 ， 如 果 单 击 
该 方法 所 在 页 面 对 应 的 tab, 会 触发 该 方法 , 并且 单 击 几 次 触发 儿 次 ; 对 于 在 真 机 上 运行 小 程 
序 ， 进 行 tab 切换 正常 触发 该 事件 。 


图 2.16 转发 菜单 


2.3.4 页 面 配 置 文件 (json ) 


除了 全 局 的 appjson 配置 外 , 每 个 页 面 也 可 以 使 用 其 对 应 的 json 文件 进行 、 回 Bag 内 


配置 。 页 面 对 应 的 json 文件 中 的 配置 值 会 覆盖 appjson 中 的 window 配置 值 。 镁 
页 面 的 配置 文件 比 appjson 全 局 配置 简单 得 多 , 页 面 对 应 的 .json 文件 只 能 前 
设置 window 相关 的 配置 项 来 决定 本 页 面 显示 形式 ， 所 以 在 页 面 配 置 文件 中 可 回 沿 
以 不 使 用 window 键 。 23.4 

例如 ， 在 实际 应 用 开发 中 有 这 样 的 需求 : 某 小 程序 共有 10 个 页 面 ， 但 其 中 有 1 个 页 面 
不 需要 启用 下 拉 刷 新 ， 而 其 余 9 个 页 面 需要 启用 这 个 功能 ， 则 可 以 在 appjson 中 配置 启用 上 
下 拉 刷 新 ， 然 后 在 不 需要 该 功能 的 页 面 对 应 配置 文件 json 中 进行 重 写 禁 用 。 

appjson 配置 文件 代码 如 下 : 
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2 "pages": [ 
3 "pages/news/news", 
4 "pages/me/me" 
5 ]， 
6 "window": { 
这 "enablePullDownRefresh": true 
8 } 
-J : 
页 面 对 应 配置 文件 代码 如 下 : 
1 
迷 "enablePullDownRefresh": false 
S30 7 


所 有 appjson 中 的 window 配置 项 在 页 面 文件 json 中 都 是 可 以 覆盖 重 写 的 ， 但 页 面 配置 
文件 也 有 自己 特殊 的 属性 ， 如 表 2-9 所 示 。 


表 2-9 object 参数 及 功能 说 明 


本 章 详 细 介绍 了 微 信人 小 程序 的 目录 结构 及 每 个 目录 的 作用 ， 阐 述 了 小 程序 的 整体 描述 文 
件 和 页 面 描述 文件 的 功能 及 编写 的 语法 规则 。 通 过 本 章 的 学 习 ， 读 者 可 以 掌握 小 程序 页 面 结 
构 文件 编写 语言 一 一 WXML、 小 程序 页 面 生命 周期 的 概念 、 小 程序 全 局 页 面 配 置 文件 和 页 面 
配置 文件 的 编写 方法 。 


界面 设计 


前 面 讲 到 小 程序 的 用 户 界面 是 由 WXML (页 面 布局 文件 ) 和 WXSS (布局 样式 文件 ) 决 
定 的 。 为 了 让 开发 者 能 够 以 最 快 的 速度 设计 出 美观 而 具有 动态 效果 的 小 程序 界面 ， 本 章 结合 
实际 案例 的 开发 过 程 介绍 微 信 小 程序 页 面 的 常用 样式 和 flex 页 面 布 局 〈 弹 性 布局 )。 

理解 CSS 标准 规定 的 页 面 布局 模型 ; 
掌握 样式 在 小 程序 界面 设计 中 的 使 用 方法 ; 
掌握 flex 布局 在 小 程序 界面 设计 中 的 使 用 方法 ; 


掌握 background-color、background-image、background-size 、background-position 
和 background-repeat 等 样式 属性 在 小 程 界面 设计 中 的 使 用 方法 ; 

掌握 view、text、input、button、swiper、image 和 scroll-view 等 组 件 在 小 程序 界面 
设计 中 的 使 用 方法 。 


co 

早期 的 Web 页 面 排版 主要 使 用 HIML 中 的 table (表格 ) 元 素 实 现 ， 同 时 在 table 的 单元 
格 中 通过 align、valign 属性 来 指定 水 平方 向 、 垂 直方 向 的 对 齐 ， 但 是 这 种 方式 国 浊 党 间 斋 [ 
很 难 直接 传达 页 面 的 实际 含义 ， 使 页 面 文档 的 可 读 性 不 高 ， 且 不 容易 维护 。 于 贸 
是 ，1996 年 12 月 ，W3C (World Wide Web Consortium， 万 维 网 联盟 ) 推出 了 
用 以 解决 结构 与 样式 混杂 问题 的 CSS 规范 的 第 一 个 版 本 , 即 CSS1.0。.1998 年 ， 
W3C 发 布 了 CSS 的 第 二 个 版 本 ， 即 CSS2.0。2001 年 5 月 ，W3C 完成 了 CSS3 
草案 规范 。CSS 是 一 种 用 来 表现 HIML 或 XML 等 文本 样式 的 计算 机 语言 ， 它 不 仅 可 以 静态 
地 修饰 网 页 ， 配 合 各 种 脚本 语言 动态 地 对 网 页 各 元 素 进行 格式 化 ， 还 能 够 对 网 页 中 元 素 位 置 
的 排版 进行 像素 级 精确 控制 。CSS 标准 规定 的 页 面 布局 模型 有 以 下 3 种 : 

(1) 流动 模型 : 流动 模型 是 浏览 器 默认 的 一 种 网 页 布局 模式 ， 块 级 元 素 自 上 向 下 排列 ， 
行 级 元 素 自 左 向 右 排列 。 如 表格 布局 就 是 采用 流动 模型 实现 页 面 元 素 的 布局 ， 它 是 CSS 页 面 
布局 最 简单 的 方式 ， 页 面 元 素 排版 布局 时 以 默认 的 html 元 素 在 表格 中 的 结构 顺序 显示 。 

(2) 浮动 模型 .浮动 模型 提出 的 初衷 是 为 了 实现 文字 环绕 效果 ， 采 用 浮动 布局 的 页 面 ， 
浮动 元 素 可 以 左右 移动 ， 直 到 它 的 边缘 碰 到 父 元 素 的 边缘 或 男 一 个 浮动 元 素 的 边缘 。 如 浮动 
布局 就 是 采用 浮动 模型 实现 页 面 元 素 的 布局 ， 它 是 目前 Web 页 面 设计 采用 最 多 的 一 种 布局 
老臣 < 

(3) 层 模型 ， 层 模型 是 根据 页 面 元 素 的 position 属性 值 的 不 同 来 控制 页 面 元 素 的 显示 位 
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置 ，position 的 属性 值 有 static〈 静 态 )、absolute (绝对 )、relative (相对) 和 fixed (固定 ) 四 
种 定位 布局 。 

这 几 种 布局 模型 的 搭配 使 用 虽然 可 以 比较 轻松 地 完成 页 面 设计 的 常见 需求 ， 但 也 存在 缺 
少 语义 、 不 够 灵活 、 浏 览 器 兼容 性 差 等 缺陷 。 随 着 Web 页 面 的 语义 化 越 来 越 流 行 ， 为 了 与 搜 
索引 擎 建立 良好 的 沟通 、 有 助 于 聆 虫 和 机 器 很 好 地 解析 网 页 内 容 ， 方 便 屏 幕 阅读 器 、 盲 人 阅 
读 器 、 移 动 终端 设备 等 解析 后 演 染 网 页 ，W3C 从 CSS 的 第 三 版 本 (CSS3.0) 开始 提出 了 弹 
性 盒子 模型 (flex), 该 模型 的 flex 布局 方式 可 以 更 简便 、 完整 、 响 应 式 地 实现 各 种 页 面 布局 ， 
目前 也 已 经 得 到 了 几乎 所 有 浏览 器 的 支持 。 小 程序 的 开发 框架 也 使 用 了 flex 排版 布局 ， 它 有 
助 于 开发 者 快速 、 灵 活 地 构建 小 程序 的 UI。 
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微 信 小 程序 开发 框架 为 开发 人 员 提 供 了 视图 容器 (View Container)、 基 础 内 容 (Basic 
Content)、 表 单 (Form)、 导 航 (Navigation)、 媒 体 (Media)、 地 图 (Map) 和 ” 国 革 滨 网 回 
画布 (Canvas)、 开 放 能 力 (Open Ability) 等 8 大 类 组 件 ,用 于 小 程序 的 界面 设计 。 
但 是 ， 要 达到 用 户 想 要 的 界面 效果 ， 还 需要 使 用 WXSS 样式 。WXSS 样式 决定 | 
了 组 件 应 该 如 何 显示 ， 并 在 CSS 样式 的 基础 上 做 了 一 些 功 能 扩展 和 修改 。 


3.2.1 长 度 单位 


实现 CSS 样式 时 ,开发 者 为 了 保证 不 同 移动 终端 设备 显示 效果 的 适 配 性 , 需要 考虑 设备 
屏幕 的 不 同 宽度 和 像素 比 ， 采 用 一 些 技巧 来 换算 像素 单位 。 小 程序 的 WXSS 样式 文件 除了 支 
持 CSS 的 常用 长 度 单位 ( 表 3-1) 外 , 还 新 增 了 一 个 新 的 长 度 单位 一 一 rpx (responsive pixel)。 
Ipx 可 以 自动 适 配 不 同 的 屏幕 宽度 规定 屏幕 宽度 为 750rpx)， 开 发 者 设计 小 程序 的 用 户 界 
面 ， 如 果 使 用 rpx 单位 ， 换 算 工作 就 由 小 程序 底层 来 完成 ， 提 高 了 开发 效率 。 


表 3-1 CSS 常用 长 度 单位 


单位 说 明 
pt 绝对 长 度 单位 ，points (1pt 等 于 1/72 英寸 ) 
pe 绝对 长 度 单位 ，picas (1pe 等 于 12pt) 
in 绝对 长 度 单位 ， 英 寸 
cm 绝对 长 度 单位 ， 厘 米 
mm 绝对 长 度 单位 ， 毫 米 
% 相对 长 度 单位 ， 百 分 比 
px 相对 长 度 单位 ，pixels 像素 

相对 长 度 单 位 ， 基 于 当前 字体 大 写字 母 M 的 尺寸 ， 当 改变 font-size 的 大 小 时 ， 该 长 度 单位 

过 将 发 生 改变 ， 默 认 lem=16px 
ex 相对 长 度 单位 ， 基 于 当前 字体 小 写字 母 x 的 高 度 值 
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小 程序 的 WXSS 支持 样式 的 导入 ,这 个 功能 在 实际 应 用 开发 时 非常 有 用 ,尤其 是 使 用 一 
些 其 他 库 的 时 候 可 以 直接 导入 第 三 方 的 WXSS 文件 。 用 法 步骤 如 下 : 
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(1) 新 建 要 导入 的 WXSS 样式 文件 ， 此 处 以 新 建 的 common.wxss 样式 文件 为 例 ， 代 码 
如 下 : 
1 /*#* comon.wxss **/ 
.top-p{ 
只 padding:15px; 
sn 


(2) 使 用 @import 语句 导入 WXSS 样式 文件 ， 此 处 以 在 app.wxss 样式 文件 导入 
common.wxss 样式 文件 为 例 ， 代 码 如 下 : 


1 /xx app.WXSS **/ 

2  @import "common.wxss"; /** @import 语句 后 使 用 需要 导入 的 样式 文件 的 相对 路 径 **/ 
3 .bottom-p { 

4 padding:10px; 

5 1} 


3.2.3 ”内 联 样式 与 类 样式 


与 CSS 样式 一 样 ，WXSS 样式 支持 使 用 style、class 属性 控制 组 件 的 样式 ， 但 是 实际 使 
用 时 有 区 别 : 在 小 程序 的 样式 使 用 时 ， 对 于 静态 样式 ， 应 统一 定义 到 WXSS 样式 文件 中 ， 然 
后 在 WXML 页 面 文件 中 由 class 属性 设 定 ; 对 于 动态 样式 ， 需 要 直接 在 WXML 页 面 文件 中 
由 style 属性 设 定 ， 这样 有 助 于 运行 时 动态 解析 ， 以 便 根据 后 台数 据 更 新 页 面 内 容 。 如 果 将 过 
多 的 样式 直接 使 用 style 属性 设 定 , 会 导致 小 程序 在 页 面 泻 染 时 还 要 解析 对 应 的 样式 布局 ， 影 
响 小 程序 泻 染 页 面 的 速度 。 

style 接受 动态 样式 ， 运 行 时 会 进行 解析 ， 尽 量 避 免 将 静态 的 样式 写 入 style 中 ， 以 免 影 
响 泻 染 速度 。 代 码 格式 如 下 所 示 : 


1 <!-- style 属性 控制 样式 --> 
2 <view style = "color:{{color}};"></view> <!-- color 需要 在 js 文件 中 操作 --> 


class 用 于 指定 样式 规则 ,通常 用 于 统一 样式 类 型 的 多 个 元 素 或 重复 使 用 的 元 素 , 减少 重 
复 代码 的 数量 。 其 属性 值 是 样式 规则 中 类 选择 器 名 (样式 类 名 ) 的 集合 。 代码 格 式 如 下 所 示 : 


1 <!-- class 类 控制 样式 --> 
2 <view class = "view style” ></view> <! 一 view style 需要 在 wxss 文件 中 定义 一 > 


2ocl33 flex 布 R 


flex 是 flexible box 〈 弹 性 盒子 布局 ) 的 缩写 ， 为 页 面 使 用 盒 状 模型 设计 提供 了 最 大 的 灵 
活性 。 开 发 设计 微 信 小 程序 时 ， 它 既 能 符合 小 程序 的 文档 开发 要 求 ， 又 能 减少 国 9 口 | 
CSS 的 相关 样式 声明 。 ; : 
采用 flex 布局 的 元 素 称 为 ex 容器 (flex container)，flex 容器 中 可 以 包含 站 
一 个 或 多 个 flex 容器 项 (flex item)， 一 个 容器 项 只 能 属于 一 个 直接 的 容器 ， 容 
器 里 面 的 多 个 容器 项 有 排列 方向 。 如 图 3.1 所 示 ， 其 中 有 一 个 flex 容器 (flex 本 
container) 和 三 个 容器 项 (flex itetm)， 这 三 个 容器 项 从 左 到 右 排 列 ， 和 容器 项 排列 方向 一 致 
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的 这 条 线 称 作 主轴 (main axis)， 图 中 的 主轴 为 水 平方 向 ， 与 主轴 垂直 的 一 条 线 称 作 交 叉 轴 
(cross axis)， 图 中 的 交叉 轴 为 垂直 方向 。 主 轴 的 开始 位 置 〈 与 边框 的 交叉 点 ， 图 3.1 中 左边 
框 处 ) 称 为 main start, 主轴 的 结束 位 置 ( 与 边框 的 交叉 点 , 图 3.1 中 右边 框 处 ) 称 为 main end; 
交叉 轴 的 开始 位 置 ( 与 边框 的 交叉 点 ， 图 3.1 中 上 边框 处 ) 称 为 cross start， 交 叉 轴 的 结束 位 
置 ( 与 边框 的 交叉 点 ， 图 3.1 中 下 边框 处 ) 称 为 cross end。 


和 4 
flex container ' ee 
cross start Cross axis 
TH te - 

i i | + 
flex item flex item ! flexitem | 
1 1 
| ! 

-main size -- 斌 


cross size 


PP- main start cross end main end -- 司 


| 
图 3.1 flex 布局 结构 

在 小 程序 页 面 设计 中 ， 设 有 display:flex 或 display:block 的 元 素 就 是 一 个 flex container， 
flex container 中 的 任何 一 个 flex item 也 可 以 使 用 block 或 flex 进行 布局 。 

(1) display: block， 指定 为 块 内 容器 模式 ， 总 是 从 新 行 开始 显示 容器 项 (flex item)， 小 
程序 的 视图 容器 (view、scroll-view、swiper、movable-view 和 cover-view 等 ) 的 样式 属性 display 
默认 设置 为 block。 

(2) display: flex， 指 定 为 行内 容器 模式 ， 默 认 在 一 行内 显示 容器 项 (flex item)， 也 可 以 
使 用 flex-wrap 、flex-direction 等 属性 设置 特定 的 显示 效果 。 

例如 ， 页 面 样式 文件 和 页 面 结构 文件 分 别 如 下 列 代码 ， 其 显示 效果 如 图 3.2 所 示 。 

(1) 页 面 样式 文件 。 


1 /xx 页 面 样式 文件 一 一 index.wxss **/ 
2 page{ 

和 height: 100%; 

4 width: 100%; 

二 background-color: bisque; 
Se 

7 .container { 

8 width: 100%; 

9 height: 100%; 

10 display: block; 

:Oe 

12 .item { 

3 height: 80rpx; 

14 width: 80rpx; 

EB background-color: yellow; 
16 margin: 10rpx; 
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sever WeChats 19:55 


WeChat 


图 3.2 block 显示 效果 


用 CSS 设置 样式 时 ，width:100% 会 自动 填 满 整个 屏幕 的 宽度 ， 而 height:100% 只 会 自动 
适应 子 元 素 的 高 度 。 在 正常 的 HTML 代码 中 ， 要 让 子 元 素 自动 填充 整个 屏幕 的 高 度 ， 就 必须 
给 它 的 父 元 素 也 设置 height:100%， 所 以 通常 给 网 页 的 HTML 或 body 属性 增加 height:100% 
就 可 以 了 。 由 于 在 小 程序 页 面 结 构 文件 (wxml 文件 ) 中 并 没有 HTML 和 body 元素， 所 以 不 
可 能 这 样 设置 ， 但 是 小 程序 有 一 个 Page( ) 注 册页 面 的 方法 ， 因 此 可 以 使 用 上 述 第 2~6 行 的 代 
码 来 设置 flex container 父 容器 (本 示例 的 页 面容 器 page 即 为 父 容器 ) 的 height 属性 ,读者 在 
开发 小 程序 时 务必 要 注意 这 一 细节 。 

(2) 页 面 结构 文件 。 


<!-- 页 面 结构 文件 


index.wxml --> 


<view class="container"> 


1 

肥 

| <View 
4 <View 
5 <View 
6 <View 
有 <View 
8 <view 
9 <view 
1 


0 </view> 


class='item'>0</view> 
class='item'>1</view> 
class='item'>2</view> 
class='item'>3</view> 
class='item'>4</view> 
class='item'>5</view> 
class='item'>6</view> 


如 果 将 页 面 样式 文件 中 第 10 行 的 block 改 为 flex， 显 示 效果 如 图 3.3 所 示 。 
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图 3.3 flex 显示 效果 
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3.3.1 容器 的 属性 


flex-direction 

flex-direction 属性 用 来 规定 容器 的 主轴 方向 , 主轴 可 以 是 水 平方 向 , 也 可 以 是 垂直 方向 ， 
交叉 轴 垂 直 于 主轴 方向 。 即 flex-direction 属性 用 以 指定 容器 项 在 容器 中 如 何 摆布 ， 它 有 4 个 
属性 值 。 

(1) row (默认 值 ): 主轴 为 水 平方 向 ， 容 器 项 的 起 点 在 水 平方 向 的 左 端 。 例 如 ， 页 面 样 
式 文件 和 页 面 结构 文件 分 别 如 下 列 代码 所 示 ， 其 显示 效果 如 图 3.3 所 示 。 

G@ 页 面 样式 文件 。 

/xx 页 面 样式 文件 一 一 flexdirection.wxss **/ 

page { 


Lb 

区 

height: 100%; 
4 width: 100%; 
5 

6 

7 

8 


background-color: bisque; 
} 
.container { 

width: 100%; 


9 height: 100%; 

10 display: flex; 

3 flex-direction: row; 
2 

13 .item { 


14 height: 80rpx; 

5, width: 80rpx; 

16 background-color: yellow; 
17 margin: 10rpx; 

| 


@ 页 面 结构 文件 。 


1 <!-- 页 面 结构 文件 一 一 flexdirection.wxml --> 
2 <view class="container"> 

可 <view class='item'>0</View> 

4 <view class='item'>1</View> 

5 <view class='item'>2</view> 

6 <view class='item'>3</view> 

<view class='item'>4</view> 

8 <view class='item'>5</view> 

9 <view class='item'>6</view> 

10 </view> 


(2) row-reverse: 主轴 为 水 平方 向 ， 容 器 项 的 起 点 在 水 平方 向 的 右 端 。 例如， 将 上 述 页 
面 样式 文件 第 11 行 代码 的 flex-direction 属性 值 设置 为 row-reverse， 页 面 结构 文件 代码 相同 ， 
其 显示 效果 如 图 3.4 所 示 。 

(3) column: 主轴 为 垂直 方向 ， 容 器 项 的 起 点 在 垂直 方向 的 上 沿 。 例 如 ， 将 上 述 页 面 样 
式 文件 第 11 行 代码 的 flex-direction 属性 值 设置 为 column， 页 面 结构 文件 代码 相同 ， 其 显示 
效果 如 图 3.2 所 示 。 

(4) column-reverse: 主轴 为 垂直 方向 ， 容 器 项 的 起 点 在 垂直 方向 的 下 沿 。 例 如 ， 将 上 述 
页 面 样式 文件 第 11 行 代码 的 flex-direction 属性 值 设置 为 column-reverse， 页 面 结 构 文 件 代码 
相同 ， 其 显示 效果 如 图 3.5 所 示 。 
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图 3.4 row-reverse 显示 效果 图 3.5 column-reverse 显示 效果 


flex-wrap 

默认 情况 下 ， 容 器 项 都 只 能 在 一 条 主轴 线 上 排列 ， 超 过 界面 宽度 的 容器 项 一 般 不 显示 。 
flex-wrap 属性 用 于 指定 容器 项 在 一 条 主轴 线 上 排列 不 下 时 如 何 换行 (本 部 分 介绍 内 容 以 主轴 
线 在 水 平方 向 为 例 )， 它 有 如 下 3 个 属性 值 : 

(1) nowrap〈 默 认 值 ): 容器 项 不 换行 ， 如 果 容器 项 超过 容器 的 宽度 和 高 度 ， 会 自动 在 
主轴 方向 压缩 ， 如 果 压 缩 后 仍然 超过 容器 的 宽度 和 高 度 ， 超 过 的 部 分 不 会 显示 。 例 如 ， 页 面 
样式 文件 和 页 面 结构 文件 代码 如 下 ， 其 显示 效果 如 图 3.6 所 示 。 
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图 3.6 nowrap 显示 效果 


GD 页 面 样式 文件 。 


/** 页 面 样式 文件 一 一 flexwrap.wzxss **/ 
page { 

height: 100%; 

width: 100%; 

background-color: bisque; 


MAODP 
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Gy 

.container { 

8 width: 100%; 

9 display: flex; 

10 flex-direction: row; 
i flex-wrap: nowrap; 
2 

13 .item { 


14 height: 80rpx; 

15 width: 80rpx; 

16 background-color: yellow; 
Eg margin: 10rpx; 

16. 站 


@ 页 面 结构 文件 。 


1 ”<!-- 页 面 结构 文件 一 一 flexwrap.wxml 一 -> 
2 <view class="container"> 

3 <view class='item'>0</view> 

4 <view class='item'>1</view> 

5 <view class='item'>2</view> 

6 <view class='item'>3</View> 

a <!-- 与 上 面 代码 类 似 ， 此 处 略 ” --> 

8 <view class='item'>16</view> 

9 <view class='item'>17</view> 

10 </view> 


从 图 3.6 可 以 看 出 ， 主 轴 是 水 平方 向 的 ， 容 器 项 没有 换行 ， 但 每 个 容器 项 目的 宽度 已 经 
在 水 平方 向 压缩 ， 压 缩 后 还 有 14、15、16、17 等 内 容 没有 显示 。 

(2) wrap: 容器 项 换行 ， 从 左 到 右 排列 ， 第 二 行 在 第 一 行 的 下 面 ， 第 三 行 在 第 二 行 的 下 
j， 以 此 类 推 。 例 如 ， 将 上 述 页 面 样式 文件 第 11 行 代码 的 flex-wrap 属性 值 设 置 为 wrap， 页 
j 结 构 文件 代码 相同 ， 其 显示 效果 如 图 3.7 所 示 。 

(3) wrap-reverse: 容器 项 换行 ， 从 左 到 右 排列 ， 第 二 行 在 第 一 行 的 上 面 ， 第 三 行 在 第 二 
行 的 上 面 ， 以 此 类 推 。 例 如 ， 将 上 述 页 面 样式 文件 第 11 行 代码 的 flex-wrap 属性 值 设置 为 
wrap-reverse， 页 面 结构 文件 代码 相同 ， 其 显示 效果 如 图 3.8 所 示 。 
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3.7 ”wrap 显示 效果 图 3.8 flex-flow 显示 效果 
flex-flow 


flex-flow 属性 是 flex-direction 和 flex-wrap 属性 的 简写 形式 , 它 的 默认 值 是 row nowrap， 
即 主轴 为 水 平方 向 、 不 换行 。flex-flow 属性 值 的 设置 可 以 使 用 下 列 形式 : 


1 flex-flow:flex-direction flex-wrap 7 


妨 第 3 章 界面 设计 


例如 ， 要 实现 图 3.8 所 示 的 显示 效果 ， 可 以 将 前 面 exwrap.wxss 样式 文件 的 第 10 行 、 
第 11 行 代码 蔡 换 为 下 列 代码 : 


1 flex-flow: row wrap-reverse; 


justify-content 

justify-content 属性 用 于 指定 容器 项 在 主轴 方向 的 对 齐 方 式 ， 它 有 如 下 5 个 属性 值 : 

(1) flex-start (默认 值 ): 容器 项 与 主轴 的 起 始 端 对 齐 。 如 果 主 轴 为 从 左 向 右 的 水 平方 向 ， 
即 容器 项 左 对 齐 ; 如 果 主 轴 为 从 上 向 下 的 垂直 方向 ， 即 容器 项 顶端 对 齐 。 

(2) flex-end: 容器 项 与 主轴 的 末尾 端 对 齐 。 如 果 主 轴 为 从 左 向 右 的 水 平方 向 ， 即 容器 项 
右 对 齐 ; 如 果 主 轴 为 从 上 向 下 的 垂直 方向 ， 即 容器 项 底 端 对 齐 。 例 如 ， 页 面 样式 文件 和 页 面 
结构 文件 代码 如 下 , 其 显示 效果 如 图 3.9 所 示 。 读 者 需要 注意 图 3.5 与 图 3.9 显示 效果 的 区 别 ， 
图 3.5 显示 效果 对 应 的 主轴 是 从 下 向 上 的 垂直 方向 ，justify-content 的 值 默 认为 flex-start， 所 
以 容器 项 与 主轴 的 起 始 端 对 齐 排 列 〈 从 下 向 上 的 垂直 方向 排列 ); 而 图 3.9 显示 效果 对 应 的 主 
轴 是 从 上 向 下 的 垂直 方向 ，justify-content 的 值 设置 为 lex-end， 所 以 容器 项 与 主轴 的 末尾 端 
对 齐 排列 。 
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图 3.9 flex-end 显示 效果 
Q 页 面 样式 文件 


/** 页 面 样式 文件 justifycontent .wxss **/ 
page { 
height: 100%; 
width: 100%; 
background-color: bisque; 
} 
.container { 
width: 100%; 
height: 100%; 
10 display: flex; 
1 flex-direction: column; 
be justify-content: flex-end; 
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4 item { 
5 height: 80rpx; 
16 width: 80rpx; 


17 background-color: yellow; 
18 margin: 10rpx; 
了 9 十 


@ 页 面 结构 文件 


<!-- 页 面 结构 文件 一 一 justifycontent.wxml --> 
<view class="container"> 

<view class="'item'>0</view> 

<view class='item'>1</view> 

<view class='item'>2</view> 

<view class="'item'>3</view> 

<!-- 与 上 面 代码 类 似 ， 此 处 略 ” -> 

<view class='item'>6</view> 
</view> 


oowamwmewn 


(3)center: 容器 项 在 主轴 方向 排列 时 居中 对 齐 。 例 如 , 将 页 面 样式 文件 justifycontent.wxss 
的 第 11 行 和 第 12 行 修改 为 如 下 代码 后 ， 其 显示 效果 如 图 3.10 所 示 。 


得 flex-direction: row; 
2 justify-content: center; 
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图 3.10 “center 显示 效果 


(4) space-between: 容器 项 沿 主轴 方向 均匀 分 布 ， 位 于 首尾 两 端的 容器 项 与 容器 两 端 对 
齐 。 例 如 ， 将 页 面 样式 文件 justifycontent.wxss 的 第 11 行 和 第 12 行 修改 为 如 下 代码 后 ， 其 显 
示 效 果 如 图 3.11 所 示 。 


1 flex-direction: row; 
2 justify-content: space-between; 
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图 3.11 space-between 显示 效果 
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(5) space-around: 容器 项 沿 主轴 方向 均匀 分 布 ， 位 于 首尾 两 端的 容器 项 到 容器 边缘 的 距 
离 是 容器 项 与 容器 项 之 间 间 距 的 一 半 。 

align-items 

align-items 属性 用 于 指定 容器 项 在 交叉 轴 方 向 的 对 齐 方式 ， 它 有 如 下 5 个 属性 值 : 

(1) stretch〈 默 认 值 ): 容器 项 沿 交 叉 轴 方向 的 尺寸 拉 伸 至 与 容器 一 致 。 当 主轴 方向 是 水 
平方 向 时 ， 如 果 容 器 项 没有 设置 高 度 属性 (height) 或 者 高 度 属性 值 为 anato， 容 器 项 将 会 填 满 
整个 容器 的 高 度 。 例 如 , 页 面 样式 文件 和 页 面 结构 文件 代码 如 下 , 其 显示 效果 如 图 3.12 所 示 。 
当主 轴 方 向 是 垂直 方向 时 ， 如 果 容 器 项 没有 设置 宽度 属性 〈width) 或 者 宽度 属性 值 为 auto， 
容器 项 将 会 填 满 整个 容器 的 宽度 。 

Q@ 页 面 样式 文件 。 


1 /xx 页 面 样式 文件 一 alignitems .wxss **/ 
2 page 1{ 

3 height: 100%; 

4 width: 100%; 

3 background-color: bisque; 
J 

.container { 

8 width: 100%; 

9 height: 100%; 

10 display: flex; 

11 flex-direction: row; 
2 

13 .item { 


14 width: 80rpx; 

5 background-color: yellow; 
16 margin: 10rpx; 

| 


@ 页 面 结构 文件 。 


1 <!-- 页 面 结构 文件 alignitems.wxml --> 
2 <view class="container"> 

3 <view class='item'>0</view> 

4 <view class='item'>1</view> 

5 <view class='item'>2</View> 
6 

了 

8 

3 


<view class='item'>3</view> 

<!-- 与 上 面 代码 类 似 ， 此 处 略 ” -> 

<view class='item'>6</view> 
</view> 


(2) flex-start: 容器 项 与 交叉 轴 方 向 的 起 始 端 对 齐 。 

(3) flex-end: 容器 项 与 交叉 轴 方 向 的 末尾 端 对 齐 。 

(4) center: 容器 项 与 交叉 轴 中 点 对 齐 。 

(5) baseline: 容器 项 与 基线 对 齐 。 

图 align-content 

align-content 属性 用 于 指定 多 根 轴线 的 对 齐 方式 。 如 果 容 器 项 目 只 有 一 根 轴线 ， 该 属性 
不 起 作用 。 它 共有 flex-start、flex-end、center、space-between、space-around 和 stretch〔 默 认 
值 ) 等 6 个 属性 值 ， 其 功能 含义 与 前 面 介 绍 的 一 样 ， 这 里 不 再 缆 述 。 
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图 3.12 stretch 显示 效果 图 3.13 order 显示 效果 


3.3.2 ”容器 项 的 属性 


order 

容器 项 排列 的 位 置 默 认 是 按照 页 面 结构 文件 代码 中 的 先后 顺序 排列 的 ， 也 就 是 哪个 容器 
项 写 在 前 面 ， 默 认 就 排列 在 前 面 。 而 order 属性 可 以 改变 容器 项 的 排列 顺序 ， 数 值 越 小 ， 排 
列 越 靠 前 ， 默 认 值 为 0。 例如， 页 面 样式 文件 和 页 面 结构 文件 代码 如 下 ,其 显示 效果 如 图 3.13 
所 示 。 

@ 页 面 样式 文件 。 


/** 页 面 样式 文件 一 一 order .wxss **/ 
page { 
height: 100%; 
width: 100%; 
background-color: bisque; 
} 
.container { 
width: 100%; 
9 height: 100%; 
10 height: 100%; 
ll display: flex; 
12 flex-direction: row; 
P| 
14 .item { 
15. width: 80rpx; 
16 height: 80rpx; 


3 background-color: yellow; 
18 margin: 10rpx; 
| 


20 .item:nth-child(5) { 
这 和 order: = 一 1 
2 
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@ 页 面 结构 文件 。 


<!-- 页 面 结构 文件 一 order.wxml --> 

<view class="container"> 
<view class="'item'>0</view> 
<view class='item'>1</view> 
<view class='item'>2</view> 
<view class='item'>3</view> 
<!-- 与 上 面 代码 类 似 ， 此 处 略 -> 
<view class='item'>6</view> 

</view> 


oAAONP 


上 述 代 码 的 第 20 行使 用 了 nth-child(n) 选 择 器 ， 表 示 匹 配属 于 其 父 元 素 的 第 n 个 子 元 
素 ， 此 处 item: nth-child(5) 规 定 属于 容器 的 第 5 个 容器 项 的 order 属性 值 为 -1。 从 图 3.12 的 
显示 效果 可 以 看 出 ， 第 5 个 容器 项 就 是 用 view 组 件 显示 的 “4” 元 素 ， 其 order 属性 值 被 设 
置 为 -1， 其 余 元 素 的 order 属性 值 仍然 是 默认 值 0， 所 以 4 元 素 通过 这 样 设置 后 ， 排 在 其 他 元 
素 的 最 前 面 。 

加 fex-grow 

flex-grow 属性 用 于 定义 容器 项 的 放大 比例 ， 默 认 值 为 0， 即 如 果 存 在 剩余 空间 ， 该 容器 
项 也 不 会 放大 显示 。 如 果 所 有 容器 项 的 flex-grow 属性 值 设 为 1， 则 它们 将 等 分 剩余 空间 ， 如 
果 其 中 一 个 容器 项 的 flex-grow 属性 值 设 为 n， 其 他 容器 项 目 都 设 为 1， 则 前 者 占据 的 剩余 空 
间 将 比 其 他 容器 项 多 n 倍 。 当 有 放大 空间 时 ， 值 越 大 ， 放 大 的 比例 越 大 。 

图 flex-shrink 

flex-shrink 属性 用 于 定义 容器 项 的 缩小 比例 ， 默认 值 为 1， 即 如 果 空 间 不 足 , 该 容器 项 目 
将 缩小 ， 值 越 大 ， 缩 小 的 比例 越 小 。 如 果 所 有 容器 项 目的 flex-shrink 属性 值 设 为 1， 当 空间 
人 都 将 等 比例 缩小 ; 如 果 一 个 容器 项 的 flex-shrink 属性 值 设 为 0, 其 他 容器 项 都 设 为 1， 

当空 间 不 足 时 ， 前 者 不 缩小 。 负 值 对 该 属性 无 效 。 

flex-basis 

flex-basis 属性 用 于 定义 分 配 多 余 空间 之 前 容器 项 占据 的 主轴 空间 。 小 程序 根据 这 个 属性 
计算 主轴 是 否 有 多 余 空间 ， 默 认 值 为 aato， 即 容器 项 的 本 来 大 小 。 例 如 ， 如 果 容 器 项 目 有 多 
余 的 空间 ，flex-basis 属性 设置 为 200mpx， 那 么 容器 项 会 放大 到 200rpx 的 宽度 。 

回 fex 

flex 属性 是 flex-grow、flex-shrink 和 flex-basis 属性 的 简写 ， 默 认 值 为 0、1、auto， 后 
两 个 属性 可 选 。 该 属性 有 两 个 快捷 值 ，auto(1 1 auto) 和 none(0 0 auto)。 建 议 使 用 时 优先 使 用 
这 个 属性 ， 而 不 是 单独 写 3 个 分 开 的 属性 值 ， 这 样 有 助 于 提高 小 程序 的 效率 。 

图 align-self 

align-self 属性 用 于 设置 单个 容器 项 独特 的 对 齐 方式 ， 默 认 值 为 auto〈 表 示 继 承 父 容器 的 
align-items 属性 ); 该 属性 可 以 取 6 个 值 ,除了 auto 值 外 , 其 他 都 与 align-items 属性 完全 一 致 。 
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“ 猜 画 小 歌 ” 是 Google 于 2018 年 7 月 18 日 发 布 的 首 款 微 信 小 程序 。 该 小 加 六 
程序 可 以 让 每 个 人 都 有 机 会 体验 人 工 智能 技术 驱动 下 的 人 机 交互 。 本 节 将 模仿 ， 

“ 猜 画 小 歌 ” 小 程序 首 个 界面 〈 见 图 3.14) 的 实现 过 程 介 绍 view 组 件 、text 组 个 
件 和 背景 、 颜 色 、 边 框 等 样式 在 小 程序 界面 设计 中 的 使 用 方法 。 
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图 3.14 “ 猜 画 小 歌 ” 界面 
3.4.1 预备 知识 
view 
view (视图 组 件 ) 是 一 个 容器 组 件 ， 是 微 信 小 程序 界面 设计 中 最 常用 、 最 基础 的 组 件 。 
它 里 面 不 仅 可 以 放置 其 他 组 件 ， 还 可 以 直接 显示 文本 信息 。 本 章 3.3 节 已 经 在 flex 布局 中 阅 


述 了 用 view 组 件 显示 文本 信息 和 小 程序 界面 的 布局 方法 。 该 组 件 与 HTML 中 的 div 标签 一 
样 ， 可 以 实现 页 面 结构 的 划分 、 页 面 布局 的 调整 等 ， 另 外 还 有 表 3-2 中 所 示 的 单 击 态 属性 和 


功能 。 
表 3-2 view 组 件 的 属性 及 功能 说 明 
属性 名 说 明 
指定 当 单 击 view 组 件 时 调用 的 样式 类 。 默 认 值 为 none， 即 没有 单 击 
hover-class 


效果 

指定 是 否 阻 止 本 节点 的 祖先 节点 出 现 单 击 态 , 即 当 单 击 本 节点 时 , 是 
否 调用 祖先 节点 hover-class 指定 的 样式 类 。 特别 说 明 , 只 要 在 代码 中 
定义 了 该 属性 ， 不 管 属性 值 是 tue 还 是 false， 都 是 阻止 的 

指定 按 住 后 多 久 出 现 调用 hover-class 指定 的 样式 类 。 默 认 值 为 50， 
单位 为 ms 

指定 松 开 后 调用 hover-class 指定 的 样式 类 状态 保留 时 间 。 默 认 值 为 
400， 单 位 为 ms 


hover-stop-propagation 


hover-start-time 


hover-stay-time 


面 一 段 代码 为 例 ， 介 绍 表 3-2 中 4 个 属性 的 用 法 。 
看 结构 代码 如 下 : 
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2 <view hover-class="red" class="view"> 单 击 view 才 会 调用 .red 样式 类 </view> 

2 <view hover-class="blue"> 

3 <view> 其 他 内 容 </view> 

4 <view hover-stop-propagation="true" hover-class="yellow"> 单 击 此 view 阻止 
调用 .blue 样式 类 </view> 

5 </view> 

6 <view hover-start-time="1000" hover-class="red"> 单 击 view 1 秒 后 调用 .red 样式 
类 </view> 

7 <view hover-stay-time="3000" hover-class="red"> 单 击 view 能 让 .red 样式 持续 3 
秒 </view> 


页 面 样式 代码 如 下 : 


.redf{ 
color: red; 
E 
-blue{ 
color: blue; 
} 
.yellow!{ 
color: yellow; 
E 
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页 面 结构 代码 第 1 行 指定 了 view 组 件 的 hover-class 属性 ， 当 单 击 view 时 ， 会 调用 .red 
样式 类 ， 即 此 时 view 组 件 上 显示 的 文本 为 红色 ; 第 2~5 行使 用 了 view 媒 套 来 显示 文本 ， 第 
4 行 中 使 用 了 hover-stop-propagation 属性 ， 此 时 若 单 击 第 4 行 定义 的 view， 会 调用 .yellow 样 
式 类 ， 但 不 会 调用 其 祖先 节点 (第 2 行 定义 的 view) 定义 的 .blue 样式 类 ， 若 没有 使 用 
hover-stop-propagation 属性 ， 则 不 仅 调用 .yellow 样式 类 ， 还 调用 其 祖先 节点 定义 的 .blue 样 


式 类 。 

text 

text( 文 本 组 件 ) 是 小 程序 中 最 基础 的 组 件 之 一 ， 常 用 于 在 页 面 中 展示 文字 ， 它 除了 包 
含 诸如 颜色 、 背 景 等 基础 组 件 的 属性 外 ， 还 包括 表 3-3 所 示 的 小 程序 特有 属性 。 


表 3-3 text 组 件 属性 及 功能 说 明 


属性 名 说 明 
selectable 文本 是 否 可 选 ， 默 认 值 为 false (文本 不 可 选 ) 
space 显示 连续 空格 ， 默 认 不 显示 连续 空格 
decode 是 否 解码 ， 默 认 值 为 false (不 解码 ) 


text 支持 m 换行 ,selectable 属性 用 于 指定 text 显示 的 文本 在 页 面 上 是 否 可 选 ， 即 当 
selectable 为 true 时 ， 可 以 长 按 文本 选中 ， 也 可 以 复制 。 这 两 个 特性 是 text 与 view 组 件 在 显 
示 文 本 内 容 时 的 区 别 。 

space 属性 用 于 设置 文本 中 的 空格 在 页 面 上 显示 时 的 间距 ， 它 有 ensp〈 空 格 显示 时 为 中 
文字 符 空格 一 半 大 小 )、emsp〔 空 格 显示 时 为 中 文字 符 空格 大 小 )》 和 nbsp 空格 显示 时 根据 
字体 设置 空格 大 小 ) 三 个 属性 值 。 例 如 ，space 的 属性 值 为 emsp， 表 示 text 中 的 文本 车 有 多 
个 空格 ， 则 在 页 面 上 以 连续 多 个 中 文字 符 空格 显示 。 

decode 属性 用 于 设置 是 否 可 以 在 页 面 上 泻 染 一 些 特殊 的 标签 ， 例 如 小 于 号 < 〈&lt)、 大 
于 号 >(&gt)、 与 符号 &〈(&amp)、 撤 号 '(&apos) 及 空格 号 (&ensp、&emsp、&nbsp)。 默 
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认 状 态 下 ，decode 的 属性 值 为 false， 即 这 些 符号 在 小 程序 中 默认 不 能 被 直接 演 染 显示 ， 如 果 
要 演 染 显示 ， 就 需要 将 decode 属性 值 设 为 tue。 例 如 ， 以 下 代码 表示 text 中 的 文本 不 可 选 ， 
文本 中 的 空格 根据 字体 设置 间距 大 小 ， 可 以 在 页 面 上 显示 < 和 > 等 特殊 符号 。 


mw 
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<view> 
<text selectable="'false' Space='nbsp' decode='true'> 
This is the first line.\nglt;é&gt; 
</text> 

</view> 


下 面 使 用 view 和 text 组 件 及 样式 实现 图 3.15 所 示 的 界面 ， 实 现代 码 如 下 。 
@ 页 面 结构 文件 。 


<view class="bcontainer"> 
<view class="view name"> 
<text> 人 的 一 生 至 少 要 有 两 次 冲动 </text> 
<text> 一 次 为 奋不顾身 的 爱情 </text> 
<text> 一 次 为 奋不顾身 的 爱情 </text> 
<text> 一 次 为 说 走 就 走 的 旅行 </text> 
<text class="text line"> </text> 
<text>Andy Andrews</text> 
</view> 
</view> 


在 以 上 代码 中 ， 最 外 层 使 用 view 组 件 作为 容器 ， 控 制图 3.15 界面 的 全 部 背景 效果 ， 并 


设置 了 class 的 属性 ， 即 使 用 了 类 选择 器 .bcontainer，.bcontainer 样式 需要 在 页 面 样式 文件 中 
定义 ;然后 在 内 层 使 用 view 组 件 放 置 具体 的 文本 显示 内 容 , 由 于 文本 显示 内 容 需 要 指定 样式 ， 
所 以 本 案例 的 文本 显示 内 容 使 用 了 text 组 件 ， 也 使 用 了 类 选择 器 .view_name， 用 于 控制 整个 
文本 显示 区 域 的 背景 。 代 码 的 第 3~8 行 中 分 别 定义 了 text 组 件 上 显示 的 内 容 ， 从 图 3.15 可 以 
看 出 只 有 第 7 行内 容 格式 与 其 他 行 的 显示 效果 有 差别 ， 所 以 使 用 了 类 选择 器 .text_line。 


@ 页 面 样式 文件 。 


page { 
width: 100%; 
height: 100%; 

} 

.bcontainer { 
height: 100%; 
background: #d0dbec; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: space-around; 

} 

.View name { 
width: 100%; 
background-color: #a6dlca; 
display: flex; 
flex-direction: column; 
justify-content: center; 

下 

七 KE 二 
font-size: 25rpx; 
align-self: center; 

} 

:text line 
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25 padding: 25rpx; 
2600} 


以 上 代码 的 第 5~12 行 定义 了 外 层 view 的 布局 ， 其 中 第 8~9 行 设置 布局 使 用 主轴 为 垂直 
方向 (从 上 至 下 ) 的 flex 布局 、 第 10 行 设置 布局 中 的 内 容 在 交叉 轴 方 向 (水 平方 向 ) 居中 、 
第 11 行 设置 布局 中 内 容 沿 主轴 方向 (垂直 方向 ) 均匀 分 布 ; 第 13~19 行 定 义 了 内 层 view 的 
布局 ， 其 中 第 16~17 行 设置 布局 使 用 主轴 为 垂直 方向 〈 从 上 至 下 ) 的 flex 布局 、 第 18 行 设 
置 布局 中 内 容 ( 即 text 组 件 ) 沿 主轴 方向 〈 垂 直方 向 ) 居中 对 齐 ; 第 20~23 行 定义 了 一 个 控 
制 text 组 件 样式 的 元 素 选 择 器 ， 用 于 设置 text 组 件 上 显示 的 文字 大 小 和 对 齐 方式 ; 第 24-26 
行 定义 了 图 3.15 中 第 5 行文 本 的 内 边 间 距 。 
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图 3.15 view 和 text 的 显示 效果 


背景 与 颜色 

CSS 允许 应 用 颜色 值 作为 背景 ， 也 允许 使 用 背景 图 像 创建 复杂 的 效果 。 小 程序 的 样式 文 
件 基 本 延续 了 CSS 的 相关 属性 ， 但 是 实际 使 用 中 还 是 有 一 些 差异 的 。 下 面 介绍 小 程序 界面 设 
计 中 常用 的 一 些 属性 作用 和 使 用 方法 。 
(1) background-color。 
background-color 属性 用 于 为 页 面 元 素 设置 一 种 背景 颜色 , 该 颜色 会 填充 元 素 的 内 容 、 内 
边 距 和 内 边框 。background-color 的 属性 及 功能 如 表 3-4 所 示 。 


表 3-4 background-color 的 属性 及 功能 说 明 


值 说 明 
color name 规定 颜色 值 为 颜色 名 称 的 背景 颜色 (如 red) 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 背景 颜色 (如 #0000) 


rgb_number 规定 颜色 值 为 rgb 代码 的 背景 颜色 (如 rgb (255.0.0)) 
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续 表 
值 说 明 
transparent 默认 。 背 景 颜色 为 透明 
inherit 规定 应 该 从 父 元 素 继承 background-color 属性 的 设置 


(2) background-image 

background- image 属性 用 于 为 页 面 元 素 设置 一 个 背景 图 像 , 该 图 像 占 据 元 素 的 全 部 尺寸 ， 
包括 内 边 距 和 内 边框 ， 默 认 背景 图 像 位 于 元 素 的 左上 角 ， 并 在 水 平和 垂直 方向 上 重复 显示 。 
background-image 的 属性 及 功能 如 表 3-5 所 示 。 


表 3-5 background-image 的 属性 及 功能 说 明 


值 说 明 
ul (URL') 指向 图 像 的 路 径 
none 默认 值 。 不 显示 背景 图 像 
inherit 从 父 元 素 继承 background-image 属性 的 设置 


需要 说 明 的 是 : 本 地 资源 图 片 无 法 通过 微 信 小 程序 的 样式 文件 获取 ， 所 以 在 微 信 小 程序 
设计 时 ， 如 果 需 要 使 用 background-image 属性 设置 背景 图 片 ， 可 以 在 样式 文件 中 使 用 网 络 图 
片 。 例 如 ， 要 实现 图 3.16 的 显示 效果 ， 可 以 使 用 如 下 代码 。 

@ 页 面 结构 文件 。 


<view class="container"> 
<view class="view img"></view> 
<View class="view name"> 
<text > 人 的 一 生 至 少 要 有 两 次 冲动 </text> 
<!-- 与 上 面 代码 类 似 ， 此 处 略 。 --> 
<text class="text line"> 
<text >Andy Andrews</text> 
</view> 
</view> 


</text> 
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从 上 述 代 码 可 以 看 出 ， 实 现 图 3.16 的 效果 是 在 图 3.15 的 基础 上 增加 了 第 2 行 代码 ， 即 
使 用 1 个 view 组 件 和 定义 了 1 个 view_img 样式 选择 器 显示 图 片 。 
@ 页 面 样式 文件 。 


<!-- 与 上 面 代码 类 似 ， 此 处 略 。 -> 
.bcontainer { 
height: 100%; 
background: #d0dbec; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: space-around; 


本 
10 <!-- 与 上 面 代码 类 似 ， 此 处 略 以 下 为 新 增 样式 定义 --> 
11 .view img{ 
12 width: 230rpx; 
13 height: 230rpx; 
14 background-image: url('https://zsc.nnutc.edu.cn/ local/B/BC/58/ 
BE88E69F69A86F324E5122302B9 8E7373D8 48D3D.jpg'); 
5 background-size: cover; 
16 ¥ 
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上 述 代码 的 第 11~16 行 定义 了 .view_img 类 选择 器 设置 页 面 样式 ，width、height 属性 分 
别 指定 view 组 件 的 宽度 、 高 度 ，background-image 属性 指定 了 view 组 件 的 背景 图 片 ， 
background-size 属性 值 为 cover, 表示 让 图 片 等 比例 缩放 ， 铺 满 整个 view。 如 果 要 实现 图 3.17 
所 示 的 图 片 效 果 ， 可 以 在 上 述 代码 .view_img 类 选择 器 代码 中 添加 “border-radius: 50%;”， 
border-radius 属性 用 于 给 view 设置 圆 角 边框 。 
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3.16 background-image 显示 效果 图 3.17 ”border-radius 的 显示 效果 
但 是 ， 如 果 view 组 件 中 显示 的 是 本 地 图 片 资源 ， 且 不 在 样式 文件 中 设置 则 只 可 以 在 定 
义 组 件 时 使 用 内 联 样式 ， 即 用 下 面 代码 替换 上 述 页 面 结构 的 第 2 行 代码 ， 并 删除 上 述 页 面 样 
式 代 码 的 第 14 行 。 


1 <view class="view img" style='background-image:url(../../images/lvxin. 
jpg) ; '></view> 


(3) background-size。 
background-size 属性 用 于 设 定 背 景 图 像 的 尺寸 ， 它 的 属性 及 功能 如 表 3-6 所 示 。 


表 3-6 background-size 的 属性 及 功能 说 明 


值 说 明 
auto 背景 图 的 实际 大 小 ， 默 认 值 
igi 设置 青 景 图 像 的 高 度 和 宽度 。 第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 如 果 只 设置 一 个 值 ， 
则 第 二 个 值 会 被 设置 为 auto。 如 background-size:100px 100px: 
een 以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 ， 第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 


如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 auto。 如 background-size:100% 100%; 
cover 等 比例 缩放 背景 图 像 以 完全 覆盖 背景 区 域 ， 有 可 能 超出 背景 区 域 


| 
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续 表 
值 


将 背景 图 片 等 比例 缩放 到 宽度 或 高 度 与 背景 区 域 的 宽度 或 高 度 相等 , 背景 图 片 始终 在 背景 
域内 


Xl 


contain 


(4) background-position 。 
background-position 属性 用 于 设 定 背景 图 像 的 起 始 位 置 ， 它 的 属性 及 功能 如 表 3-7 所 示 。 


表 3-7 background-position 的 属性 及 功能 说 明 
值 说 明 
水 平方 向 可 选 left、center、right， 季 直方 向 可 选 top、center、bottom; xpos 为 left 表示 图 
像 的 左边 与 对 象 的 左边 对 齐 ， 为 right 表示 图 像 的 右边 和 对 象 的 右边 对 齐 ; ypos 为 top 表 
xpos、 ypos | 示 图 像 的 顶部 和 对 象 的 顶部 对 齐 , 为 bottom 表示 图 像 的 底部 和 对 象 的 底部 对 齐 ; xpos、 ypos 
为 center 表示 图 像 在 水 平和 垂直 方向 的 中 心 和 对 象 在 水 平和 垂直 方向 的 中 心 对 齐 ; 如 果 仅 指 
定 一 个 值 ， 则 另 一 个 值 是 center 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 冬 直 位 置 。 左 上 角 是 0、0。 右 下 角 是 100% 、100%。 如 
果 仅 指定 了 一 个 值 ， 其 他 值 将 是 50%。 默认 值 为 0、0 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 上 角 是 0、0。 单 位 可 以 是 像素 (0px，0Opx) 
或 任何 其 他 单位 。 如 果 仅 指定 了 一 个 值 ， 其 他 值 将 是 30% 。 默 认 值 为 0、0 
inherit 从 父 元 素 继承 background-position 属性 的 设置 


Xx%、y% 


X、y 


(5) background-repeat。 
background-repeat 属性 用 于 设 定 背景 图 像 是 否 重复 或 如 何 重复 ， 它 的 属性 值 及 功能 
表 3-8 所 示 o 


表 3-8 background-repeat 的 属性 及 功能 说 明 


值 说 明 
Tepeat 背景 图 像 向 垂直 和 水 平方 向 重复 。 默 认 值 
Tepeat-X 只 有 水 平 位 置 会 重复 背景 图 像 
repeat-y 只 有 季 直 位 置 会 重复 背景 图 像 
no-repeat 背景 图 像 不 会 重复 
inherit 从 父 元 素 继承 background-repeat 属性 的 设置 


3.4.2 仿 “ 猜 画 小 歌 ” 界 面 的 实现 


素材 准备 

根据 图 3.14 的 显示 效果 ， 需 要 准备 界面 背景 图 片 bgroundjpg、 头 像 图 片 
touimgjpg、 操 作 按钮 图 片 btn1.jpg、btn2.jpg、btn3.jpg 和 btn4.jpg， 并 将 这 些 
图 片 保存 到 项 目的 images/guess 文件 夹 下 。 

界面 实现 

本 案例 实现 时 ， 将 图 3.14 整个 界面 的 设计 过 程 分 为 背景 、 头 像 、 用 户 信 
息 和 操作 按钮 四 个 部 分 ， 如 图 3.18 所 示 。 

(1) 背景 。 

Q 页 面 布局 代码 。 


1 <view class="container" style="background-image: url('../../images/guess/ 


bground.jpg');"> 


2 


3 
4 
3 


1 


< = 关 侯 代 久 > 
<!-- 用 户 信息 代码 --> 
<!-- 操作 按钮 代码 --> 


</view> 
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图 3.18 


@ 页 面 样式 代码 。 


Paget 
height: 100%; 
width: 100%; 

} 

.container { 
height: 100%; 
width: 100%; 
display: flex; 
flex-direction: column; 
align-items: center; 
background-size: cover; 


“ 猜 画 小 歌 ” 界 面 设计 图 


background-repeat: no-repeat; 


} 


页 面 布局 代码 使 用 view 组 件 显示 背景 图 片 
置 为 列 方向 摆布 的 flex 布局 、 页 内 内 容 居中 显示 、 


(2) 头像 。 
Q 页面 布局 代码 。 
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， 并 应 用 自 定义 的 container 样式 ， 将 页 面 设 
凶 景 覆盖 父 容器 并 且 不 重复 显示 。 


<View class='touclass' style="background-image: url('../../images/guess/ 
touimg.jpg');"></view> 


本 微 信 小 程序 案例 开发 “敬礼 


@ 页 面 样式 代码 。 


.touclass { 
margin-top: 280rpx; 
height: 150rpx; 
width: 150rpx; 
background-size: cover; 
background-repeat: no-repeat; 
border-radius: 50%; 

} 


DAMANOAODP 


头像 部 分 用 margin-top 设置 距 父 容器 项 部 的 距离 ， 用 width 和 height 设置 头像 的 显示 尺 


寸 ， 用 border-radius 设置 边框 弧度 。 
(3) 用 户 信息 。 
@ 页 面 布局 代码 。 


1 <view class="userclass"> 
2 <text> 泡 泡 </text> 
3 <text class='level'>LV.1 画室 学 徒 </text> 
4 </view> 
@ 页 面 样式 代码 。 
1 .Userclass{ 
display: flex; 
3 flex-direction: column; 
4 align-items: center; 
人 
6 text { 
yy font-size: 32rpx; 
8 font-weight: bold; 
9 conor rqD (5 065 ZI 
10 EF 
11 .level { 
2 font-weight: normal; 
3 font-size: 25rpx; 
14 } 


用 户 信息 包含 用 户 名 和 用 户 等 级 两 行 信息 ， 页 面 布局 代码 中 使 用 类 选择 器 userclass 定义 
用 户 信息 布局 的 格式 , 使 用 标签 选择 器 text 定义 用 户 名 的 显示 样式 , 使 用 类 选择 器 level 定义 


用 户 等 级 的 显示 样式 。 
(4) 操作 按钮 。 
Q 页 面 布局 代码 。 


和 <view class='btnview'> 


2 <view class="btn" style="background-image: 


btnl.png');"></view> 


3 <view class="btn" style="background-image: 


btn2.png');"></view> 


4 <View class="btn" style="background-image: 


btn3.png');"></view> 


5 <view class="btn" style="background-image: 


btn4.png');"></view> 
6 </view> 


@ 页 面 样式 代码 。 


ia 区 加 天 本 
1 
i 


Urls 


--/images/guess/ 
../images/guess/ 
../images/guess/ 


.-./images/guess/ 
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.btnview { 
margin-top: 60rpx; 
height: 480rpx; 
display: flex; 
flex-direction: column; 
justify-content: space-between; 

} 

-btn{ 
height: 11l0rpx; 

10 width: 300rpx; 

1 background-size: cover; 

rk 


omwamummwnb 


上 述 页 面 布 局 代码 中 直接 使 用 4 个 view 分 别 加 载 不 同 的 图 片 ,实现 4 个 操作 按钮 的 显示 ， 
并 在 样式 代码 中 通过 自 定义 的 .btnview 类 选择 器 控制 4 个 按钮 在 该 区 域 的 垂直 平均 位 置 摆布 ， 
使 用 .btn 类 选择 器 定义 4 个 操作 按钮 的 显示 样式 。 本 案例 的 详细 代码 ， 读 者 可 以 参阅 代码 包 
lesson_layout/pages/guess 文件 夹 下 的 内 容 。 


Oo3.5 商品 展示 界面 设计 


移动 互联 网 的 迅猛 发 展 改变 着 人 们 的 生活 方式 ， 传 统 的 线 下 实体 店 交易 模式 已 经 不 能 满 
足 当今 商品 交易 市 场 的 需求 。 线 上 线 下 相 结合 的 交易 模式 已 经 成 为 主流 ， 而 使 用 移动 终端 购 
物 越 来 越 受 到 人 们 的 喜爱 。 所 以 ， 拥 有 一 款 方便 、 快 捷 、 个 性 化 的 购物 小 程序 已 成 为 商家 的 
内 在 需求 。 本 节 将 以 购物 小 程序 的 商品 展示 页 面 (图 3.19) 设计 为 例 ， 介 绍 input、button、 
swiper、image 和 scroll-view 组 件 在 小 程序 界面 设计 中 的 使 用 方法 。 
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< WeChat 


请 输入 要 搜索 的 商品 名 


[ 祝 方 正品 享 5 期 旬 旱 ]Huawei/ 华 为 P2 


[官方 正品 享 6 期 免 量 ]Huawei/ 华 为 P2 


¥3753 2000 人 #12 BT 
进 店 > 
A 


[官方 正品 享 6 期 免 时 ]Huawei/ 华 为 P2 


3599 1391 人 村 改天 放 


图 3.19 商品 展示 界面 
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司 引 微 信 小 程序 案例 开发 ”过 们 


3.5.1 ”预备 知识 


input 

input (输入 框 组 件 ) 用 于 接收 用 户 输入 的 组 件 ， 它 是 一 个 原生 组 件 ,字体 泪 
是 系统 字体 , 所 以 无 法 设置 font-family 属性 , 在 input 聚焦 期 间 , 避免 使 用 CSS 回 
动画 。 除 了 公共 属性 外 ,， 它 的 特定 属性 比较 多 ， 限 于 篇 幅 ， 本 教程 仅 介绍 表 3-9 3.5.1 


所 示 的 属性 及 功能 。 
表 3-9 input 组 件 的 属性 及 功能 说 明 
属性 名 类 型 说 明 
value String 输入 框 的 初始 值 
输入 数据 的 类 型 , 默认 值 为 text, 可 选 text (文本 )、number (数字 )、idcard 

Da Smng 。 | (身份 证 ) 或 digit ( 带 小 数 点 的 数字 ) 
password Boolean | 是 否 为 密码 类 型 ， 默 认 值 为 lse (不 是 密码 类 型 ) 
disabled Boolean | 是 否 禁用 ， 默 认 值 为 false (不 禁用 ) 
placeholder String 输入 框 为 空 时 显示 的 内 容 


placeholder-style “| String 设置 placeholder 的 样式 
placeholder-class | String 设置 placeholder 的 样式 类 ， 默 认 值 为 input-placeholder 


maxlength Number | 最 大 输入 长 度 ， 默 认 值 为 140， 设 置 为 -1 时 不 限制 最 大 长 度 
focus Boolean | 是 否 获取 焦点 ， 默 认 值 为 false (不 能 自动 获得 焦点 ) 


adjust-position Boolean | 键盘 弹 起 时 ， 是 否 自 动 上 推 页 面 ， 默 认 值 为 false (不 上 推 》 

设置 键盘 右 下 角 按钮 的 文字 ， 可 选 的 是 send、search、next、go 或 done， 
默认 值 为 done 

confirm-hold Boolean | 单 击 键盘 右 下 角 按钮 时 是 否 保持 键盘 不 收 起 ， 默 认 值 为 flse〈 键 盘 收 起 ) 
光标 起 始 位 置 ，focus 为 tue 时 有 效 ， 需 与 selection-end 搭配 使 用 ， 即 可 


confirm-type String 


selection-start Number 以 默认 选中 一 部 分 文字 
selection-end Number | 光标 结束 位 置 ，focus 为 tue 时 有 效 ， 需 与 selection-start 搭配 使 用 
button 


button《〈 命 令 按 钮 组 件 ) 用 于 在 小 程序 的 界面 上 显示 一 个 命令 按钮 ， 并 根据 form-type 和 
open-type 属性 执行 不 同 的 操作 。 除 了 公共 属性 外 ， 它 的 单 击 态 属性 与 view 组 件 一 样 ， 限 于 
篇 幅 ， 本 教程 仅 介绍 表 3-10 所 示 的 属性 及 功能 。 


表 3-10 button 组 件 的 属性 及 功能 说 明 


属性 名 说 明 
size | Sting ”| 设置 按钮 的 大 小 ， 默 认 值 为 default， 可 选 为 default 和 mini 
ne 设置 按钮 样式 的 类 型 ， 默认 值 为 default， 可 选 为 primary、default 或 
mini 
plain Boolean ”| 按钮 是 否 镁 空 ， 背 景色 透明 ， 默 认 值 为 false 
disabled Boolean ”| 是 否 禁用 ， 默 认 值 为 false (不 禁用 ) 
loading Boolean | 设置 名 称 前 是 否 带 loading 图 标 ， 默 认 值 为 false (不 显示 ) 
。 用 于 <form/> 组 件 ， 单 击 分 别 会 触发 <form/> 组 件 的 submit (提交 表单 数 
form-type String 


据 ) /teset (清空 表单 数据 ) 事件 
ee Sting | 设置 不 同 的 open-type， 可 以 获得 不 同 的 微 信 开 放 数 据 


el 第 3 章 界面 设计 有 7 


续 表 
属性 名 


app-parameter 


说 明 
指定 在 打开 APP 时 需要 向 其 传递 的 参数 ， open-type="launchApp" 
指定 返回 用 户 信息 的 语言 ，zh_CN 为 简体 中 文 ，zh_TW 为 繁体 中 文 ， 
en 为 英文 ，open-type="getUserInfo" 
会 话 来 源 ，open-type="contact" 
会 话 内 消息 卡片 标题 ， 默 认为 当前 标题 ，open-type="contact" 
会 话 内 消息 卡片 单 击 跳 转 小 程序 路 径 ， 默 认为 分 享 路 径 ，open-type= 
"contact" 
会 话 内 消息 卡片 图 片 ， 默 认为 截图 ，open-type="contact" 
是 否 显示 会 话 内 消息 卡片 ， 默 认为 false，open-type="contact" 


lang 


session-from 


send-message-title 


send-message-path 


send-message-img 


send-message-card 
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< WeChat 


人 宾 入 几 


傅 答 入 富 码 


图 3.20 登录 界面 


从 图 3.20 可 以 看 出 ， 整 个 界面 可 以 分 为 图 像 显示 区 和 用 户 信息 输入 区 两 个 部 分 ， 所 以 页 
面 布局 代码 如 下 : 


1 <view class='container'> 

芝 <image class='touimg' src='../../images/login/toux.jpg'></image> 

3 <view class='login'> 

4 <input class='userinfo' placeholder=' 请 输入 账号 ' placeholder-style= 
"color:red' type='number'></input> 

5 <input class='userinfo' placeholder=' 请 输入 密码 ' placeholder-class= 
"pwdclass' type='password'></input> 

6 <button class='btn' type='primary'> 登 录 </button> 

7 </view> 

8 </view> 


上 述 代码 的 第 2 行 用 image 组 件 显示 头像 ， 第 3~7 行 用 input、button 组 件 供用 户 输入 信 
息 ， 并 用 placeholder、placeholder-class 及 type 等 属性 控制 组 件 的 样式 。 对 应 的 样式 文件 代码 
如 下 : 
1 .container { /* 整 个 页 面 的 样式 类 */ 


区 width: 100%; 
3 height: 100%; 


后 微 信 小 程序 案例 开发 ”过 们 


4 display: flex; 

5 flex-direction: column; 

:i 

7 .touimg { /*image 组 件 的 样式 类 */ 
8 width: 150rpx; 

3 height: 150rpx; 


10 background-color: #e3e3e3; 

i align-content: center; 

12 align-self: center; 

13 ”border-radius: 60%;  /* 头 像 的 边框 弧度 */ 
La 

15 .login { /* 用 户 信 息 输入 区 的 样式 类 */ 
16 display: flex; 

37 flex-direction: column; 

18 margin-top: 100rpx; 

LT 

20 .userinfo { /* 输 入 框 的 样式 类 */ 

2 margin-left: 15rpx; 

2 margin-right: 15rpx; 

23 margin-bottom: 15rpx; 

24 height: 45px; 

25 ”border: lpx solid green; /* 边 界 : 大 小 1px， 为 固体 ， 为 绿色 */ 


26 border-radius: 30px; /* 输 入 框 的 边框 弧度 */ 
2 

28 .pwdclasst{ /*placeholder-class 属性 的 样式 类 */ 
29 color: red; 

30 } 

300 DEn /* 登 录 按钮 的 样式 类 */ 


3 margin-left: 15rpx; 
33 margin-right: 15rpx; 
34 border-radius: 30px; 
339 


本 案例 详细 代码 , 读者 可 以 参阅 代码 包 lesson_layout/pages/login 文件 夹 中 回 
的 内 容 。 

swiper 地 

swiper〔 滑 块 视图 容器 ) 用 于 轮 播 显示 页 面 上 的 内 容 ， 即 类 似 页 面 上 的 横 回 苇 so 
幅 广 告 。 它 可 以 通过 手指 对 屏幕 的 滑动 实现 容器 内 内 容 的 切换 效果 ， 也 可 以 通 人 
过 设置 autoplay 属性 实现 自动 切换 容器 内 内 容 的 效果 。 作 为 一 个 容器 类 组 件 ， 它 需要 和 
swiper-item 组 件 搭配 使 用 ，swiper-item 组 件 内 可 以 放置 要 轮 播 显 示 的 image 组 件 、view 组 件 
等 ，swiper-item 组 件 只 有 一 个 item-id 属性 ， 用 于 指定 swiper-item 的 标识 符 。swiper 组 件 的 
常用 属性 和 功能 如 表 3-11 所 示 。 


表 3-11 swiper 组 件 的 属性 及 功能 说 明 


设置 是 否 在 滑 块 视图 上 显示 面板 指示 点 ， 默 认 值 为 false〈 不 显示 指示 


indicator-dots Boolean | 二 ) 

indicator-color Color 设置 指示 点 颜色 ， 默 认 值 为 rgba (0,0,0,0.3) 

indicator-active-color | Color 设置 当前 选中 的 指示 点 颜色 ， 默 认 值 为 #000000 

autoplay Boolean | 设置 滑 块 视图 内 的 内 容 是 否 自动 切换 ， 默 认 值 为 false (不 自动 切换 ) 
current Number | 设置 滑 块 视图 内 默认 显示 内 容 的 index (从 0 开始 计数 )， 默 认 值 为 0 


设置 滑 块 视图 内 的 内 容 自动 切换 时 间 间 隔 , 单位 为 ms, 默认 值 为 5000 


emal Namber | (5s 切 换 1 次 ) 
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续 表 


说 明 
设置 滑 块 视图 内 滑动 动画 的 时 长 ， 单 位 为 ms， 默 认 值 为 500〈 滑 动 动 
画 延 时 0.5s) 

设置 滑动 方向 是 否 为 纵向 ， 默 认 值 为 false (滑动 方向 为 水 平方 向 ) 
设置 前 一 个 滑 块 内 容 露 出 的 部 分 ， 默 认 值 为 0px 〈 不 露出 ) 
设置 后 一 个 滑 块 内 容 露 出 的 部 分 ， 默 认 值 为 0px 〈 不 露 


类 型 


duration Number 


Boolean 


previous-margin 
next-margin 


scroll-view 
scroll-view 〔 深 动 视图 容器 ) 用 于 在 页 面 上 实现 一 个 可 以 滚动 的 视图 区 域 展示 信息 ， 通 
常 应 用 于 页 面 内 需要 固定 的 内 容 和 需要 滚动 的 内 容 。 它 包括 滚动 方向 、 滚 动 边界 和 滚动 状态 
等 属性 ， 其 常用 属性 和 功能 如 表 3-12 所 示 。 
表 3-12 scroll-view 组 件 的 属性 及 功能 说 明 


属性 名 | 类 型 | 说 明 
scroll-x 设置 是 否 允许 横向 滚动 ， 默 认 值 为 false (不 允许 ) 
scroll-y Boolean | 设置 是 否 允 许 纵向 滚动 ， 默 认 值 为 false (不 允许 ) 
设置 距 顶 部 (纵向 ) /左边 (横向 ) 多 远 时 触发 scrolltoupper 事件 ， 默 
por rho Number | 认 值 为 50， 单 位 为 px 
设置 距 底部 (纵向 ) /右边 (横向 ) 多 远 时 触发 scrolltolower 事件 ， 
lower-threshold Number 认 值 为 50， 单 位 为 px 
scroll-top Number | 设置 纵向 滚动 条 位 置 
scroll-left Number | 设置 横向 滚动 条 位 置 


scroll-with-animation ”| Boolean | 设置 滚动 条 滚动 时 是 否 使 用 动画 效果 ， 默 认 值 为 false 〈 不 使 用 ) 
i i 使 用 scroll-view 中 子 元 素 的 id 控制 滚动 , 设置 该 值 可 以 让 scroll-view 
wt 8 | 直接 跳 转 到 对 应 子 元 素 所 在 位 置 


a Boolea | 设置 用 户 音 击 顶部 状态 栏 (1OS) 或 标题 栏 (Android) 时 滚动 条 是 大 
? 直接 返回 项 部 ， 默 认 值 为 false (不 返回 ) 


scroll-view 主要 用 于 实现 横向 滚动 卡片 和 页 面 顶 部 固定 而 下 部 列表 可 滚动 的 应 用 场景 ， 
具体 使 用 时 要 注意 以 下 3 个 要 点 : 
。 使 用 竖 直 方向 滚动 时 ， 需 要 使 用 height 属性 给 scroll-view 设置 一 个 固定 高 度 。 
。 在 scroll-view 中 不 能 使 用 textarea、map、canvas 和 video 组 件 。 
。 滚动 scroll-view 时 会 阻止 页 面 回 弹 ， 即 在 scroll-view 中 使 用 滚动 操作 不 会 触发 
onPullDownRefresh 事件 。 


3.5.2 ”商品 展示 界面 的 实现 


素材 准备 

根据 图 3.19 的 显示 效果 ， 需 要 准备 轮 揪 图片 、 商 品 图 片 ， 并 将 这 些 图 片 
保存 到 项 目的 images/shop 文件 夹 下 。 

界面 实现 

本 案例 实现 时 , 将 图 3.19 的 整个 界面 设计 过 程 分 为 搜索 输入 区 、 横 幅 广告 区 和 商品 列表 
区 三 个 部 分 。 输 入 区 为 图 3.19 所 示 页 面 的 搜索 按钮 所 在 行 ; 横幅 广告 区 为 图 3.19 所 示 页 面 的 
照片 显示 区 域 ， 商品 列表 区 为 图 3.19 所 示 页 面 展示 商品 图 片 、 商 品名 、 加 入 购物 车 按钮 等 信 
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息 的 区 域 。 
(1) 搜索 输入 区 。 
@ 页 面 布局 代码 。 


1 <view class="search"> 

4 <input class="input-search" placeholder=" 请 输入 要 搜索 的 商品 名 " /> 
3 <button class="btn-search"> 搜 索 </button> 

4 </view> 


搜索 输入 区 使 用 input 组 件 实现 输入 效果 ， 通 过 设置 placeholder 属性 值 控制 输入 框 为 空 
时 显示 的 信息 ; 使 用 button 组 件 实现 “搜索 ”按钮 效果 ， 给 button 组 件 绑 定 事件 后 就 可 以 实 
现 搜索 功能 。 

@ 页 面 样式 代码 。 


.Search {/* 搜 索 输 入 区 的 样式 类 */ 
width: 100%; 

margin-top: 1l0rpx; 

display: flex; 

flex-direction: row; 
align-items: center; 
justify-content: stretch; 

} 

9 ”.input-search {/* 输 入 框 的 样式 类 */ 
10 flex-grow: 1; 

1 border: lightgrey; 

12 border-style: solid; 

13 border-width: lrpx; 

14 font-size: 13px; 

5 border-bottom-left-radius: 15rpx; 
16 border-top-left-radius: 15rpx; 
py ， 

18 .btn-search {/* 搜 索 按钮 的 样式 类 */ 
19 border-radius: Orpx; 

20 border-bottom-right-radius: 15rpx; 
安 L border-top-right-radius: 15rpx; 
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学 font-size: 24rpx; 
23 ”font-family: "微软 雅 黑 "; 
24 } 


上 述 代 码 的 第 4-5 行 定义 了 搜索 输入 区 使 用 flex 弹性 布局 ， 并 且 input 组 件 和 button 组 
件 是 水 平 放置 的 ， 第 6 行 代码 表示 搜索 输入 区 中 的 内 容 垂 直 居 中 。 第 10 行 代码 表示 在 button 
组 件 正常 显示 的 状态 下 ， 用 input 组 件 填充 满 搜索 输入 区 域 ， 第 11~13 行 代码 设 定 了 input 组 
件 的 边框 线 样式 ， 第 15~16 行 分 别 设 定 了 input 组 件 的 左上 、 左 下 边框 角 处 的 弧度 。 第 19 行 
设 定 了 button 组 件 左 上 、 左 下 、 右 上 、 右 下 边框 角 处 的 弧度 为 0， 因 为 button 组 件 默认 的 四 
个 边框 角 处 是 有 弧度 的 ， 而 从 图 3.19 可 以 看 出 button 组 件 的 左上 、 左 下 是 没有 弧度 的 ， 而 右 
上 、 右 下 是 有 弧度 的 ， 所 以 第 20~21 行 代码 实现 了 这 个 效果 。 
(2) 横幅 广告 区 。 
@ 页 面 布 局 代码 。 
1 <swiper class='1ogo' indicator-dots autoplay interval="5000" duration= 
TI 


2 <swiper-item> 
3 <image src="https://zsc.nnutc.edu.cn/_ local/0/F3/12/1.jpg" style= 
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'width:100%;height:100%;" /> 


4 </swiper-item> 

5 <swiper-item> 

6 <image src="https://zsc.nnutc.edu.cn/ local/D/AB/4E/2.jpg" style= 
'width:100%;height:100%;' /> 

区 </swiper-item> 

8 <swiper-item> 

9 <image src="https://zsc.nnutc.edu.cn/ local/B/BC/58/3.jpg" style= 
'width:100%;height:100%;' /> 

10 </swiper-item> 


11 </swiper> 


上 述 代码 第 1 行 给 swiper 组 件 设置 了 显示 面板 指示 点 (indicator-dots)、 自 动 轮 播 图 片 
Cautoplay)、 每 隔 5s 自动 切换 图 片 (interval)、 每 个 图 片 切换 需要 ls (duration)。 第 2~10 行 
代码 分 别 用 swiper-item 组 件 加 载 3 张 网 络 图 片 到 image 组 件 中 。 

@ 页 面 样式 代码 。 


.logo { 
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} 


margin-top: 
margin-bottom: 10rpx; 
display: flex; 
flex-direction: row; 
justify-content: center; 


10rpx; 


(3) 商品 列表 区 。 
Q@ 页 面 布局 代码 。 


<View 
<View 
<View 
<View 
<View 
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<scroll-view scroll-y class='container'> 
<View class="demo"> 
<image class='.left' mode='aspectFit' src='../../images/shop/ 
obile.jpg'></image> 
<view class="right"> 


class='name'>[ 官 方正 品 享 6 期 免 息 ] Huawei/ 华 为 P2</view> 
class='category'>4G 全 网 通 双 卡 </view> 
class='price'>X¥3888 2391 人 付款 南京 </view> 
class='goshop'> 进 店 ></view> 

class='btn'> 


10 <button class="btn"> 加 入 购物 车 </button> 
Ti <button class="btn"> 立 即 购买 </button> 
2 </view> 


13 </View> 


14 </View> 


5 <!-- 其 他 商品 代码 类 似 ， 限 于 篇 幅 不 再 袭 述 --> 


16 </scroll-view> 


商品 列表 区 用 于 显示 多 行 不 同类 商品 的 商品 图 片 、 商 品名 、 商 品类 别 、 商 品 价格 及 “加 
入 购物 车 ”和 “立即 购买 ”等 按钮 ， 为 了 达到 图 3.19 的 显示 效果 ， 一 方面 要 保证 商品 信息 上 
下 滚动 时 搜索 输入 区 的 显示 内 容 固定 不 动 ， 另 一 方面 需要 将 每 一 行 的 商品 信息 布局 合理 ， 以 
便 将 商品 图 片 、 商 品名 、 商 品类 别 等 信息 显示 完整 。 实 现 上 述 代码 时 ， 第 1 行 通过 设置 
scroll-view 组 件 的 scroll-y 属性 实现 该 容器 内 内 容 的 上 下 滚动 ， 第 2~14 行 代码 将 每 一 行 的 商 
品 信息 分 为 左 、 右 两 侧 区 域 : 左 侧 区 域 用 image 组 件 显示 商品 图 片 ， 右 侧 区 域 用 view、button 
组 件 及 样式 代码 控制 其 显示 效果 。 

@ 页 面 样式 代码 。 
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.container {/*scroll-view 的 样式 类 */ 
width: 100%; 
height: 50%; 
background-color: rgb (227, 240, 155); 

} 

.demo {/* 每 一 行商 品 信息 的 样式 类 */ 
display: flex; /* 设 置 为 flex 布局 */ 
flex-direction: row; 
height: 200rpx; 
padding-bottom: 10rpx; 
border-bottom: lrpx solid silver; 

} 

.left {/* 每 一 行商 品 信息 左 侧 图 片 显 示 的 样式 类 */ 
display: flex; 
flex-direction: column; 
margin: 16rpx; 
width: 180rpx; 
height: 180rpx; 
background: white; 
align-content: center; 
align-self: center; 

} 

.right {/* 每 一 行商 品 信息 的 右 侧 内 容 显 示 样式 类 */ 
display: flex; 
flex-direction: column; 
flex: 1; 
margin-left: 24rpx; 
align-content: center; 
align-self: center; 

} 

.name {/* 每 一 行商 品名 的 样式 类 */ 
font-size: 30rpx; 

} 

.category {/* 每 一 行商 品类 别 的 样式 类 */ 
font-size: 20rpx; 
colors rgba CL LI LiL 05925) 

) 

.price {/* 每 一 行商 品 价格 的 样式 类 */ 
font-size: 20rpx; 
color: red; 

} 

.goshop {/* 每 一 行商 品 “ 进 店 ” 文 本 的 样式 类 */ 
font-size: 25rpx; 
colors roqba 105 L027 F102 D025) 

} 

-btn {/* 每 一 行商 品 操作 按钮 的 样式 类 */ 
display: flex; 
flex-direction: row; 
font-size: 20rpx; 
height: 45rpx; 

} 


上 述 代 码 第 3 行 用 height 属性 设置 scroll-view 组 件 的 高 度 ,如 果 没 有 设置 , 滚动 页 面 时 ， 


搜索 输入 区 和 横幅 广告 区 的 内 容 就 不 会 固定 在 页 面 区 域 ， 而 会 随 着 商品 列表 的 上 下 滚动 而 滨 
动 。 编 写 代码 时 ， 可 以 删除 此 行 ， 尝 试 一 下 它 的 运行 效果 。 第 7~8 行 定义 了 每 行商 品 的 信息 
显示 使 用 水 平方 向 的 flex 弹性 布局 ， 第 47~48 行 定义 了 每 行商 品 的 操作 按钮 也 使 用 水 平方 向 
的 flex 弹性 布局 。 
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为 了 让 整个 页 面 的 显示 内 容 与 移动 设备 的 边界 有 一 点 间隙 ， 在 整个 页 面 代码 外 面 使 用 
view 组件 ， 所 以 实现 图 3.19 页 面 效果 的 页 面 布局 代码 如 下 : 


1 <view class='alview'> 

2 <!-- 搜索 输入 区 页 面 代码 --> 
= <!-- 横幅 广告 区 页 面 代码 --> 
4 <!-- 商品 列表 区 页 面 代码 --> 
5 


</view > 


实现 图 3.19 页 面 效 果 的 页 面 样式 代码 如 下 : 


.alview { 
margin: 5rpx; 
height: 100%; 

了 


必 w 


本 案例 详细 代码 ， 读 者 可 以 参阅 代码 包 lesson_layout/pages/shop 文件 夹 中 的 内 容 。 


BE 


本 章 首 先 详细 介绍 微 信 小 程序 的 常用 样式 、flex 页 面 布局 (弹性 布局 ) 概念 和 在 小 程序 
界面 设计 中 的 使 用 方法 ， 然 后 结合 2 个 典型 案例 的 实现 过 程 阐述 微 信 小 程序 开发 框架 提供 的 
View、text、input、button、swiper、image 和 scroll-view 等 基本 组 件 在 小 程序 开发 中 的 应 用 场 
景 和 使 用 方法 。 通 过 这 一 章 的 学 习 ， 读 者 可 以 灵活 运用 页 面 样式 、flex 页 面 布局 ， 设 计 出 符 
合 要 求 的 界面 。 


基本 组 件 


一 个 功能 再 强大 的 应 用 程序 ， 如 果 没 有 美观 、 易 用 的 界面 UI (User Interface)， 人 往往 也 
很 难 吸引 用 户 。 微 信 小 程序 开发 框架 为 开发 人 员 提 供 了 一 系列 基本 组 件 ， 使 用 这 些 基本 组 件 
与 样式 布局 相 结 合 ， 可 以 快速 开发 出 符合 用 户 需 求 的 用 户 界面 。 本 章 将 结合 具体 案例 介绍 常 
用 组 件 的 样式 布局 、 事 件 的 使 用 方法 。 

本 意 学 习 目 村 ) 
掌握 组 件 和 事件 在 小 程序 开发 中 的 使 用 方法 ; 
掌握 setData( )、setInterval( ) 等 函数 的 使 用 方法 和 应 用 场景 ; 
掌握 数据 绑 定 、 条 件 泻 染 、 列 表 泻 染 的 使 用 方法 ; 
掌握 progress、switch、radio-group 与 radio、checkbox、label、navigator 和 picker 
组 件 在 小 程序 开发 中 的 使 用 方法 和 应 用 场景 ; 
掌握 wx.previewImage( ) 、 wx.IeLaunch( ) 、 wxredirectTo( ) 、 wx.navigateTo( ) 、 
wx.navigateBack( ) 等 API 在 小 程序 开发 中 的 使 用 方法 和 应 用 场景 。 


co 呈 --“- 


4.1.1 组 件 


组 件 是 微 信 小 程序 视图 层 的 基本 组 成 单元 , 微 信 小 程序 框架 既 提供 了 一 系 
列 基本 组 件 ， 让 开发 者 直接 使 用 ， 也 提供 了 自 定义 组 件 的 方法 ， 让 开发 者 设计 
满足 应 用 需求 的 自 定义 组 件 。 通 过 这 些 组 件 的 组 合 ,可 以 快速 设计 出 用 户 满意 党 
的 交互 界面 。 每 个 组 件 都 自 带 一 些 功能 及 与 微 信 风格 一 致 的 样式 ， 开 发 者 也 可 
以 根据 需要 定制 一 些 功能 和 样式 。 其实， 组 件 就 是 微 信 小 程序 框架 对 HTML5 411 
元 素 的 封装 ， 也 就 是 说 ， 只 要 微 信 小 程序 的 页 面 结构 文件 中 使 用 了 这 些 组 件 ， 就 表示 引用 了 
HTMLS 的 相关 元 素 。 

目前 ， 微 信 小 程序 框架 提供 的 基础 组 件 分 为 8 大 类 ， 如 表 4-1 所 示 。 

组 件 的 定义 

在 页 面 结构 文件 中 ， 每 个 组 件 通常 用 “开始 标签 ”表示 组 件 定义 开始 ， 用 “结束 标签 ” 
表示 组 件 定义 结束 , 用 “属性 ” 来 修饰 组 件 ， 而 组 件 的 内 容 位 于 “开始 标签 ”和 “结束 标签 ” 
之 间 。 其 定义 形式 如 下 : 


1 ”< 开始 标签 属性 =" 值 "> 
Ee 内 容 0. 
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3 ”</ 结 束 标签 > 
表 4-1 基础 组 件 及 功能 说 明 


组 件 类 别 组 件 名 功 能 组 件 类 别 组 件 名 功 能 
View 视图 容器 icon 图 标 


scroll-view 可 滚动 视图 容器 text 文字 


swiper 滑 块 视图 容器 基础 内 容 Tich-text 富 文本 
movable-view | _ 六 i 
视图 容器 “| wovable area 可 移动 的 视图 容器 progress 进度 条 
Cover-view Ee 的 人 navigator 页 面 链接 
- 导航 
覆盖 在 原生 组 件 之 functional-page- i 
coverimage | 上 的 图 片 视图 lt 跳 转 到 插件 功能 页 
button audio 音频 
image 图 片 
Tr 
多 媒体 - 
| camera 系统 相机 
live-player 实时 音 视 频 播放 


表单 wa live-pusher 实时 音 视频 录制 
open-data 展示 微 信 开 放 的 数据 
jew 承载 网 页 的 容器 
switch | official-account | 关注 公众 号 
Er 7 CIRC 
例如 , 在 页 面 结构 文件 中 定义 一 个 view 组 件 , 其 class 属性 值 为 container, 其 代码 如 下 : 


1 <view class="container"> 
页 面 内 容 


3 </view> 


ID 


组 件 的 属性 

组 件 的 属性 通常 用 于 指定 组 件 的 标识 名 称 、 显 示 样 式 、 数 据 或 事件 等 ， 所 有 基本 组 件 的 
公共 属性 及 功能 说 明 如 表 4-2 所 示 。 当 然 ， 所 有 组 件 也 可 以 有 各 自 的 自 定义 属性 ， 用 于 对 该 
组 件 的 功能 或 样式 进行 修饰 。 所 有 组 件 属 性 的 属性 值 类 型 主要 包含 以 下 7 种 : 

Q Boolean: 布尔 值 。 只 要 组 件 写 上 布尔 值 属性 ， 该 属性 值 都 被 视 为 tue; 只 有 组 件 上 
没有 该 布尔 值 对 应 的 属性 时 ， 该 属性 值 才 为 false。 如 果 该 属性 值 为 变量 ， 变 量 的 值 会 被 转换 
为 Boolean 类 型 。 例 如 ， 页 面 结构 文件 代码 如 下 : 


L <!--pages/component/component .wxml——> 
网 <view hidden class='container'> 
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3 页 面 内 容 


4 </view> 


表 4-2 基本 组 件 的 公共 属性 及 功能 说 明 


功 能 


id | string 组 件 的 唯一 标识 ， 即 组 件 的 名 称 

class | string 组 件 的 样式 类 ， 对 应 页 面 样式 文件 WXSS 中 定义 的 样式 类 
style | String 组 件 的 内 联 样式 

hidden | Boolean 组 件 是 否 显示 

data-* [Any 自 定义 属性 


bind*/ catch* 组 件 的 事件 


因为 上 述 代码 的 第 2 行 中 写 上 了 hidden 属性 ， 默 认 该 hidden 的 值 为 tue， 即 隐藏 view 
组 件 , 所 以 小 程序 页 面 上 并 不 会 显示 view 组 件 内 容 。 如 果 在 上 述 代码 中 没有 写 hidden 属性 ， 
表示 该 属性 的 值 为 false， 即 不 隐藏 view 组 件 ， 所 以 小 程序 页 面 上 会 显示 view 组 件 内 容 。 如 
果 将 上 述 代码 的 hidden 属性 值 用 变量 表示 ， 即 页 面 结构 文件 代码 如 下 : 


<!--pages/component/component .wxml-—-> 
<view hidden="{{flag}}" class='container'> 
页 面 内 容 


</view> 
对 应 的 页 面 罗 辑 文 件 代码 如 下 : 


//pages/component/component .js 
Page ({ 
data: { 
flag:false 
}) 


因为 在 页 面 罗 辑 文件 中 定义 了 flag 变量 ， 其 值 为 false， 所 以 在 页 面 结构 文件 代码 中 通过 
绑 定数 据 的 方式 获得 了 hidden 属性 值 为 false， 即 不 隐藏 view 组 件 ， 所 以 小 程序 页 面 上 会 显 
示 view 组 件 内 容 。 

@ Number: 数值 类 型 。 例 如 第 3 章 介绍 的 swiper 组 件 的 interval 属性 ， 用 于 设 定 swiper 
组 件 中 每 隔 多 长 时 间 切 换 图 片 。 如 果 属 性 设置 为 interval = "5000"， 表 示 每 隔 5s 切换 一 次 
图 片 。 

@@ String: 字符 串 类 型 。 例 如 第 3 章 介绍 的 button 组 件 的 size 属性 ， 用 于 设 定 button 按 
钮 的 大 小 。 如 果 属 性 设置 为 size= "mini" ， 表 示 button 按钮 为 小 尺寸 。 

由 Aray: 数组 类 型 。 例 如 第 2 章 介 绍 的 列表 泻 染 wx:for 属性 ， 用 于 循环 生成 相对 应 的 
列表 项 布局 。 页 面 结构 文件 代码 如 下 : 


3 
4 


au 必 wm 


<!--pages/component/component .wxml——> 
<view wx:for='{{name}}' class='container'> 


你 的 姓名 : { {item}} 


</view> 


对 应 的 页 面 逻 辑 文件 代码 如 下 : 


L 
全 
3 
4 
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//pages/component/component.js 
Page ({ 
data: { 
name: [" 张 三 ', ' 李 站", ' 王 五 "] 
} 
}) 


因为 在 页 面 逻辑 文件 中 定义 了 name 数组 ， 其 中 包含 3 个 数组 元 素 ， 所 以 在 页 面 结构 文 
件 代 码 中 使 用 wx:for 属性 ， 表 示 view 组 件 在 页 面 显 示 3 次 。 

@ Object: Object 类 型 。 例 如 表 4-1 中 的 navigator 组 件 , 该 组 件 有 1 个 extra-data 属性 ， 
当 target="miniProgram" 时 有 效 ， 表 示 需 要 传递 给 目标 小 程序 的 数据 ， 目 标 小 程序 可 在 
App.onLaunch( ) 和 App.onShow( ) 周 期 函数 中 获取 该 数据 。 

@ EventHandler: 事件 处 理 函 数 名 。 例 如 表 4-1 中 的 radio 组 件 , 该 组 件 有 1 个 bindchange 
属性 , 表示 单 选 选项 发 生变 化 时 会 触发 该 属性 绑 定 的 change 事件 (该 事件 通常 为 用 户 自 定义 
事件 ，change 事件 名 由 开发 者 定义 )，change 事件 通常 为 用 户 自 定义 事件 ，change 名 称 由 开 
发 者 定义 ， 该 事件 需要 定义 在 对 应 页 面 逻 辑 文件 的 Page( ) 函 数 中 。 mei 

@ Any: 属性 值 可 以 是 任何 类 型 。 
4.1.2 事件 : 

事件 是 微 信 小 程序 视图 层 到 逻辑 层 的 通信 方式 , 它 可 以 将 用 户 的 行为 反馈 4.1.2 
到 风 辑 层 处 理 。 也 就 是 当 用 户 在 视图 层 做 了 某 个 操作 后 执行 迪 辑 层 定 义 的 事件 处 理 函 数 。 例 
如 ， 用 户 长 按 某 一 张 图 片 、 单 击 某 一 个 按钮 等 ， 就 是 用 户 执 行 的 某 个 操作 行为 ， 用 户 长 按 图 
片 或 单 击 按钮 是 在 视图 层 发 生 的 ， 视 图 层 接收 到 这 个 操作 行为 〈《 即 事件 ) 后 ， 要 把 一 些 信息 
发 送 给 对 应 的 逻辑 代码 ， 也 就 实现 了 从 视图 层 到 逻辑 层 的 通信 。 

事件 对 象 也 可 以 携带 额外 信息 ， 如 id、dataset 和 touches 等 。 

事件 使 用 

下 面 以 一 个 简单 的 示例 介绍 事件 的 使 用 步骤。 例如 ， 在 页 面 上 定义 一 个 button 组 件 ， 单 
击 该 组 件 后 显示 “ 单 击 成 功 !” 消 息 提示 框 ， 显 示 效 果 如 图 4.1 所 示 。 
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图 4.1 事件 (1) 图 4.2 事件 (2) 
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@ 在 组 件 中 绑 定 事件 处 理 函数 。 
在 页 面 结构 代码 文件 中 创建 button 组 件 并 绑 定 showEvent( ) 函 数 ， 代 码 如 下 : 


<!--pages/event/event .wxml——> 
<View class='container'> 

<button type='primary' bindtap='showEvent'> 单 击 </button> 
</view> 


@ 在 逻辑 文件 中 定义 事件 处 理 函 数 。 
在 相应 页 面 罗 辑 文件 的 Page( ) 函 数 中 写 上 相应 的 事件 处 理 函 数 ， 代 码 如 下 : 


//pages/event/event.js 
Page ({ 
showEvent: function(){ 
Wx.SshowToast ({ 
title: ' 点 击 成 功 '， 
}) 
， 
}) 


上 述 代码 第 4-6 行 调用 了 wx.showToast (object) 函数 ， 该 函数 在 微 信 小 程序 中 用 于 显 
示 消 息 提示 框 ， 它 的 详细 使 用 方法 将 在 后 面 章 节 中 介绍 。 


AODP 


OAAMODF 


事件 分 类 
@ 冒 泡 事件 ， 一 个 组 件 上 的 事件 被 触发 后 ， 该 事件 会 向 父 节点 传递 。 微 信 小 程序 视图 
层 的 冒 泡 事 件 如 表 4-3 所 示 。 
表 4-3 冒 泡 事件 及 触发 条 件 
事件 类 型 功 能 
touchstart 手指 触摸 动作 开始 
touchmove 手指 触摸 后 移动 
touchcancel 手指 触摸 动作 被 取消 ( 打 断 )， 如 来 电 提醒 ， 弹 出 对 话 框 
touchend 手指 触摸 动作 结束 
tap 手指 触摸 ( 单 击 ) 后 马上 离开 
i 手指 触摸 后 ， 超过 350ms 再 离开 , 如 果 指 定 了 事件 回调 函数 并 触发 了 这 个 事件 , tap 
事件 将 不 被 触发 
longtap 手指 触摸 后 ， 超 过 350ms 再 离开 (推荐 使 用 longpress 事件 代替 ) 
transitionend 在 WXSS transition 或 wx.createAnimation 动画 结束 后 触发 
animationstart 在 一 个 WXSS animation 动画 开始 时 触发 
animationiteration ”| 在 一 个 WXSS animation 一 次 迭代 结束 时 触发 
animationend 在 一 个 WXSS animation 动画 完成 时 触发 
touchforcechange 在 支持 3D Touch 的 iPhone 设备 重 按时 会 触发 
@ 非 冒 泡 事件 : 一 个 组 件 上 的 事件 被 触发 后 ,该 事件 不 会 向 父 节 点 传递 。 除 表 4-3 之 外 


的 其 他 组 件 自 定 义 事件 ， 如 无 特殊 声明 都 是 非 冒 泡 事件 ， 如 <form/> 的 submit 事件 、<input/> 
的 input 事件 、<scroll-view/> 的 scroll 事件 等 。 
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图 事件 绑 定 

事件 绑 定 的 写法 与 组 件 的 属性 写法 一 样 ， 即 使 用 key-value 形式 。 但 key 需要 用 bind 或 
catch 开头 ， 然 后 加 上 表 4-3 中 列 出 的 事件 类 型 ， 如 bindtap 〈 绑 定单 击 事件 )、catchtouchstart 
〈 绑 定 触摸 开始 事件 )。value 是 一 个 字符 串 形式 的 自 定义 函数 名 ， 即 在 对 应 页 面 逻 辑 文件 的 
了 Page( ) 函 数 中 定义 的 函数 ， 该 函数 中 定义 了 触发 事件 的 动作 ， 即 触发 该 事件 要 实现 的 功能 。 

bind 事件 绑 定 可 以 触发 冒 泡 事件 ， 即 可 以 触发 父 节点 的 事件 ， 而 catch 事件 绑 定 可 以 阻 
止 冒 泡 事件 ， 即 不 会 触发 父 节点 的 事件 。 

例如 ， 要 实现 如 图 4.2 所 示 的 运行 效果 ， 可 以 在 页 面 结构 文件 中 使 用 如 下 代码 : 


<!--pages/bubble/bubble .wzxml--> 
<view class='viewl' bindtap='clickViewl'> 
最 外 层 的 view 
<view class='view2' bindtap='clickView2'> 
中 间 层 的 view 
<view class='view3' bindtap="'clickView3'> 
最 内 层 的 view 
</view> 
</view> 
</view> 


在 页 面 样式 文件 中 使 用 如 下 代码 : 


/* pages/bubble/bubble.wxss */ 
.viewl{ 
height: 500rpx; 
width: 100%; 
background-color: cyan 
} 
.view2{ 
height: 300rpx; 
8 width: 80%; 
10 background-color: yellow 
下 下 汪汪 
12 .view3{ 
3 height: 100rpx; 
14 width:60%; 
background-color: red 
EO 


在 页 面 迎 辑 文件 中 用 如 下 代码 : 


//pages/bubble/bubble.js 
Page ({ 
clickViewl:function( ){ 
console.1og (' 最 外 层 事件 ') 
}, 
clickView2: function ( ) { 
console.1og(' 中 间 层 事件 ') 
}, 
clickView3: function ( ) { 
console.1og(' 最 内 层 事件 ') 
[> 
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12 }) 


此 时 如 果 单 击 最 内 层 的 view 组 件 ， 调 试 器 窗口 会 按 顺序 输出 最 内 层 事 件 、 中 间 层 事件 、 
最 外 层 事件 ; 如 果 单 击 中间 层 的 view 组 件 , 调试 器 窗口 会 按 顺序 输出 中 间 层 事件 、 最 外 层 事 
件 。 因 为 页 面 结构 文件 中 用 bindtap 进行 事件 绑 定 ， 会 触发 冒 泡 事件 ， 即 单 击 view 后 会 冒 泡 
传递 到 最 外 层 view， 并 执行 对 应 事件 。 

如 果 将 页 面 结构 文件 中 第 4 行 代码 的 bindtap 改 为 catchtap， 单 击 最 内 层 的 view 组 件 ， 
调试 器 窗口 会 按 顺序 输出 最 内 层 事件 、 中 间 层 事件 。 因 为 在 中 间 层 的 view 组 件 用 catchtap 进 
行事 件 绑 定 ， 该 事件 不 会 触发 冒 泡 事件 ， 也 就 是 执行 事件 执行 到 这 一 层 会 终止 。 

事件 对 象 

当 组 件 动作 触发 事件 时 ， 逻 辑 层 绑 定 该 事件 的 处 理 函 数 都 会 收 到 一 个 事件 对 象 。 例 如 ， 
将 前 面 的 页 面 结构 文件 修改 为 如 下 代码 : 

<!--pages/bubble/bubble.wxml--> 
<view id='v1' class='viewl' data-al="al" bindtap='"clickView1l'> 
最 外 层 的 view 
<view id='v2' class='View2' data-a2="a2" bindtap='clickView2'> 
中 间 层 的 view 
<view id='v3' class='view3' data-a3="a3" bindtap='clickView3'> 
最 内 层 的 view 
</view> 

</view> 

0 </view> 


上 述 代码 给 view 组 件 增加 了 “id” 和 “data-* ”属性 ，id 用 于 标识 组 件 ，data-* 用 于 在 组 
件 中 定义 数据 属性 和 对 应 的 数据 属性 值 。 这 些 数据 值 可 以 通过 事件 传递 给 逻辑 层 处 理 。 数 据 
属性 必须 以 data- 开 头 ， 如 果 数 据 属性 名 中 包含 大 写字 母 ， 则 在 逻辑 层 引 用 该 数据 属性 名 时 会 
自动 转换 为 小 写字 母 。 如 data-TeacherId 引用 时 为 teacherid。 如 果 数 据 属性 名 由 多 个 单词 组 成 ， 
可 以 在 单词 之 间 使 用 连 字 符 〈-) 连接 ,但 在 逻辑 层 引 用 该 数据 属性 名 时 会 去 掉 连 字符 ， 并 使 
用 怠 峰 格 式 标识 属性 名 ， 如 data-element-type， 最 终 在 event.currentTarget.dataset 中 会 将 连 字 
符 转 成 驼峰 格式 标识 符 ， 即 elementType。 

将 前 面 的 页 面 逻辑 文件 修改 为 如 下 代码 : 


PoOoJAroODNre 


1 //pages/bubble/bubble.js 

2 Page ({ 

3 clickViewl: function (e) { 

4 console.10g(' 最 外 层 事 件 '，e) 
5 }, 

6 clickView2: function (e) { 

7 console.10g《' 中 间 层 事件 '，e) 
8 }, 

9 clickView3: function (e) { 
10 console.10og〔(' 最 内 层 事 件 '，e) 
下 让 } 

ed 


运行 上 述 代码 后 ， 单 击 最 内 层 的 view 组 件 ， 调 试 窗口 显示 图 4.3 所 示 输 出 结果 。 其 中 : 
。 type: 表示 事件 的 类 型 ， 本 示例 中 的 事件 类 型 为 tapp， 即 单 击 事件 。 
。 timeStamp: 表示 事件 生成 时 的 时 间 戳 ， 即 页 面 打开 到 触发 事件 所 经 过 的 毫秒 数 ， 本 
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示例 中 的 时 间 戳 为 6726ms。 

。 target: 表示 触发 事件 的 源 组 件 的 一 些 属性 值 集合 , 由 于 本 示例 单 击 的 是 最 内 层 的 view 
组 件 ， 所 以 触发 事件 的 源 组 件 就 是 最 内 层 的 组 件 v3， 输 出 内 容 如 图 4.4 所 示 。 其 中 
dataset 表示 v3 组 件 上 由 data- 开 头 的 自 定义 属性 组 成 的 集合 ，id 表示 v3 组 件 上 由 id 
定义 的 标识 符 。 

。 currentTarget: 表示 当前 事件 绑 定 组 件 的 一 些 属 性 值 集合 ， 由 于 本 示例 单 击 的 是 最 内 

层 的 view 组 件 ， 使 用 bindtap 绑 定 会 触发 冒 泡 事件 , 触发 的 冒 泡 事件 分 别 绑 定 在 最 内 

层 的 v3 组 件 、 中 间 层 的 v2 组 件 和 最 外 层 的 vl 组 件 ， 所 以 输出 的 id 分 别 为 v3、v2 

和 v1，dataset 也 是 对 应 组 件 绑 定 的 数据 集合 ， 输 出 内 容 如 图 4.5 所 示 。 


Sources Network Audits Sensor Trace 


[EY Console 
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Security AppData Storage 


Filter Default levels Y 


{™}, detail: 


{~-}, detail: 


"tap”", timeStamp: 6726, 
timeStamp: 6726, 


timeStamp: 6726, 


最 内 层 事件 ftype: target: {-}, currentTarget: 
中 间 层 事件 ftype: 


最 外 层 事件 > {type: 


"tap", target: {~}, currentTarget: 


"tap", target: {~}, currentTarget: {~.}, detail: 


图 4.3 输出 事件 对 象 


最 内 层 事件 
ftype: "tap”, timeStamp: 6725，tt 
Pp changedTouches: [{-}] 
Pp currentTarget: {id: 


bdetail: {x: 86, y: 65} 


"v3", offse 


中 间 层 事件 
c vitype: "taop”, 
bp changedTouche: 
Pp currentTarget: : 
pdetail: {x: 86, y: 二 


timesti 


最 外 层 事件 

vf{type: "tap"，timestamp: 6726, 1 
* changedTouches: [{-}] 
Pp currentTarget: {id: "v1", offs 
pdetail: {x: 86, y: 65} 


vtarget: 
bp dataset: {a3: "a3"} 
id: "v3" 
offsetLeft: 8 
offsetTop: 42 


offsetLeft: © 
offsetTop: 42 


vtarget: 
* dataset: {a3: 
id: "v3" 
offsetLeft: © 
offsetTop: 42 


"a3"} 


__: Object 


最 内 层 事件 
vitype; "tap"”, timeStamp: 6726, 
bP changedTouches: [{.}] 


_: Object 


图 4.4 输出 事件 对 象 target) 
中 间 层 事件 


ti vi{type: “tap”, timeStamp: 6726, t 
”changedTouches: [{f-}] 


Pp_proto_: Object 


最 外 层 事件 
vftype: "tap", timestomp: 6726, t 
b> changedTouches: [{.}] 


vcurrentTarget: 
bdataset: {a3: 
id: "v3" 
offsetLeft: 0 
offsetTop: 42 


"a3"} 


v currentTarget: 
> dataset: {a2: 
id: "v2" 
offsetLeft: 9 
offsetTop: 21 


"a2"} 


vcurrentTarget: 
bp dataset: {al 
id: “v1" 
offsetLeft: 9 
offsetTop: 9 


: "al1"} 


_: Object 


proto__: Object 


roto__: Object 


图 4.5 输出 事件 对 象 (currentTarget) 


所 以 ， 在 页 面 逻 辑 文件 中 可 以 引用 view 组 件 绑 定 的 数据 集合 的 内 容 。 例 如 ， 要 引用 v3 
组 件 的 id 值 和 绑 定 的 data-a3 数据 ， 可 以 使 用 如 下 代码 : 
clickView3: function(e) { 


console.log(e.currentTarget .dataset .a3), 
console.log(e.currentTarget .id) 


AODNDPD 


} 


。 detail: 自 定义 事件 所 携带 的 数据 ， 如 表单 组 件 的 提交 事件 会 携带 用 户 的 输入 、 媒 体 
的 错误 事件 会 携带 错误 信息 等 。 单 击 事件 的 detail 带 有 的 x、y 表示 距离 文档 左上 角 
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的 距离 ， 文 档 的 左上 角 为 原点 ， 横 向 为 x 轴 ， 纵 向 为 y 轴 。 


OO 4.2 小 学 生 算术 题 的 设计 与 实现 


随 着 移动 终端 设备 的 普通 应 用 ， 在 移动 终端 设备 上 安装 的 各 类 具有 学 习 、 测 试 功能 的 
App 越 来 越 多 ， 但 是 它们 通常 都 需要 用 户 去 相关 平台 下 载 安装 ， 代 价 太 大 。 而 微 信 小 程序 出 
现 后 ， 可 以 在 “用 完 即 走 ” 的 理念 下 设计 开发 一 款 小 学 生 算术 题 小 程序 ， 这 样 aii: 
既 可 以 比较 容易 打开 和 使 用 ， 也 可 以 减少 传统 App 使 用 的 麻烦 。 


4.2.1 预备 知识 


setData( ) 函 数 4.2.1 
setData( ) 函 数 用 于 将 数据 从 逻辑 层 异步 发 送 到 视图 层 ， 同 时 同步 改变 页 面 逻 辑 代 码 
Page( ) 中 定义 的 对 应 data 值 。 其 使 用 形式 如 下 : 


setData (Object data, Function callback) 


。 data: Object 类 型 ,以 key:value 形式 表示 ,将 Page( ) 中 对 应 data 的 key 值 修改 为 value。 

。 callback: 回调 函数 ， 在 setData( ) 引 起 的 界面 更 新 泻 染 完毕 后 的 回调 函数 。 

例如 ， 单 击 图 4.6 中 “获取 用 户 信息 ”按钮 ， 能 够 在 页 面 上 显示 微 信用 户 名 和 用 户头 像 。 实 
现 此 功能 的 页 面 设计 比较 简单 ， 只 需要 用 image 组 件 显示 头像 ,用 view 组 件 显示 用 户 名 ,用 
button 组 件 作为 命令 按钮 。 但 是 ,为 了 获得 微 信用 户 名 和 用 户头 像 ， 就 需要 使 用 button 组 件 的 特 
殊 绑 定 事件 的 属性 。 在 微 信 小 程序 框架 中 ，button 组 件 用 于 绑 定 事件 的 属性 ， 如 表 4-4 所 示 。 


eeee WeChats 


倪 泡 泡 


获取 用 户 信息 


图 4.6 获取 用 户 信息 


表 4-4 ”button 绑 定 事件 属性 
属性 功 能 
用 户 单 击 该 按钮 时 ,会 返回 获取 到 的 用 户 信息 ,回调 的 detail 数据 与 wx.getUserInfo 
返回 的 一 致 。open-type="getUserInfo" 
bindcontact 客服 消息 回调 。open-type="contact" 
bindgetphonenumber | 获取 用 户 手 机 号 回调 。open-type="getPhoneNumber" 


bindgetuserinfo 
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续 表 
属性 功 能 
binderror | 当 使 用 开放 能 力 时 ， 发 生 错误 的 回调 。open-type="launchApp" 
bindopensetting 打开 授权 设置 页 后 回调 。open-type="openSetting" 


页面 结 构 文件 代码 。 


1 <!--pages/button/button .wzxml——> 
2 <view class='container'> 
3 <image src='{{img}}'></image> 
4 <view style="'height:80rpx;'>{{userName}}</view> 
5 <button open-type="getUserInfo" bindgetuserinfo="bGetUserInfo"> 获 取 用 户 信 
息 </button> 
6 </view> 
@ 页 面 逻辑 文件 代码 。 
1 //pages/button/button.js 
2 Page ({ 
二 data: { 
4 userName: ""， 
5 img:"" 
6 }, 
到 bGetUserInfo: function(e) { 
8 console.1og(e.detail.userInfo) 
3 this.data.userName = e.detail.userInfo.nickName 
10 this.data.img = e.detail.userIinfo.avatarUrl 
EE this.setData({ 
LZ userName: this.data.userName, 
到 img: this.data.img 
14 }) 
3 
1 


上 述 代 码 第 8 行 的 输出 结果 如 图 4.7 所 示 。 其 中 avatarUrl 表示 用 户头 像 信息 ，city 表示 
用 户 所 在 城市 ,country 表示 用 户 所 在 国家 ，gender 表示 用 户 性 别 (1- 男 性 , 2- 女 性 ), language 
表示 语言 ，nickname 表示 用 户 昵 称 ，province 表示 用 户 所 在 省 份 。 所 以 上 述 代 码 的 第 11~14 
行 用 setData( ) 方 法 更 新 页 面 结构 文件 对 应 的 数据 。 


YY {nickName; " 缠 痊 首 "，gender: 1，Language: "zh_CN"，city: "Toizhou”, province: "Jiangsu", .~} 
avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/08j4TwGTfTIK1fPmNLNiaoJvTnJNebBXDPd9RwwxmSsnNi 
city: "Taizhou" 
country: "China" 


gender: 1 


图 4.7 输出 事件 对 象 (target) 
input 组 件 的 数据 绑 定 


为 了 能 够 让 在 页 面 结构 文件 的 input 组 件 上 所 做 的 操作 如 键盘 输入 数据 、 输 入 框 获 得 
i、 失 去 焦点 等 ) 传 入 页 面 逻 辑 文件 处 理 ， 并 将 页 面 逻辑 文件 的 处 理 结果 反馈 到 页 面 结构 
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文件 中 ， 微 信 小 程序 框架 中 提供 了 input 组 件 的 绑 定 事件 属性 ， 如 表 4-5 所 示 。 


表 4-5 input 绑 定 事件 属性 
属性 功 能 
bindinput | 键盘 输入 时 触发 ，event.detail = {value, cursor keyCode}，keyCode 为 键 值 
bindfocus 输入 框 获得 焦点 时 触发 ，event.detail = { value, height }，height 为 键盘 高 度 
bindblur 


eeee WeChats 16:59 


WeChat 


图 4.8 简易 四 则 运算 器 
(1) 在 页 面 结构 文件 中 定义 input 组 件 ， 其 代码 如 下 。 


<!--pages/input/input .wxml--> 
<view class='line'> 
<view class='info'> 第 一 个 数 : </view> 
<input class='lineborder' bindinput='bdInputA' placeholder=' 请 输入 数 1'> 
</input> 
5 </view> 
6 <view class='line'> 


1 
二 
3 
4 


志 <view class='info'> 第 二 个 数 : </view> 
8 <input class='lineborder' bindinput='"bdInputB' placeholder=' 请 输入 数 2'> 
</input> 


9 </view> 

10 <view class='line'> 

1 <view class='info'> 结 果 : </view> 

2 <input class='lineborder' value='{{result}}'></input> 
13 </view> 

14 <view class='line'> 

15 <button bindtap='btnAdd'>+</button> 
16 <button bindtap='btnDec'>—</button> 
和 <button bindtap='btnMul'>x</button> 
18 <button bindtap='btnDiv'>:</button> 
19 </view> 


上 述 代码 第 4 行 、 第 8 行 用 bindinput 属性 绑 定 键盘 输入 触发 事件 ,并 在 页 面 逻 辑 文件 中 
定义 ， 该 事件 用 于 获得 用 户 在 input 组 件 中 输入 的 数据 。 第 12 行 用 value 属性 绑 定 页 面 逻辑 
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文件 中 处 理 的 数据 ， 也 就 是 将 页 面 逻 辑 文件 处 理 的 result 变量 值 传送 到 页 面 结构 文件 显示 。 
(2) 在 页 面 逻辑 文件 中 定义 数据 , 定义 键盘 输入 触发 事件 , 定义 button 组 件 的 单 击 事件 ， 
其 代码 如 下 。 


1 //pages/input/input.js 
2 Pagel{ 
3 // 定 义 数据 
4 data: { 
所 digitalA: 0， 
6 digitalB: 0, 
沁 result: 0 
8 }, 
9 // 定 义 键盘 输入 触发 事件 
10 bdInputA: function (e) { 
he this.data.digitalA = e.detail.value; 
12 }, 
3 bdInputB: function (e) { 
14 this.data.digitalB = e.detail.value; 
15 }, 
16 ”// 定 义 “+”button 组 件 的 单 击 事件 
下 学 btnAdd: function ( ) { 
18 this.data.result = parseFloat (this.data.digitalA) + parseFloat 
(this.data.digitalB); 
19 this.setDatal({ 
20 result: this.data.result 
这 }) 
过 全 和 
23 ”// 减 、 乘 、 除 按钮 的 处 理 代码 同 btnadd ( ) 函数 ， 此 处 略 
24 1}) 
(3) 页 面 样式 文件 代码 如 下 。 
1 /* pages/input/input.wxss */ 
沁 .line{ 
3 margin-top: 10rpx; 
4 display: flex; 
5 flex-direction: row; 
a; 
沁 .infof 
8 width:30%; 
人 


10 .lineborder{ 
11 border: lpx solid; 


(IE 

13 buttont{ 

14 width: 25%; 
be 


4.2.2 小 学 生 算术 题 的 实现 


小 学 生 算术 题 界面 设计 
小 学 生 算术 题 的 界面 设计 如 图 4.9 和 图 4.10 所 示 。 
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图 4.9 小 学 生 算术 题 界面 (1) 图 4.10 小 学 生 算术 题 界面 (2) 


从 图 4.9 和 图 4.10 可 以 看 出 ， 整 个 界面 由 10 道 100 以 内 的 算术 题 、2 个 命令 按钮 和 底部 
导航 等 3 部 分 组 成 。 每 道 算术 题 由 题 号 、 参 ee 个 数 、 运 算 符 、 等 于 号 (=)、 输 入 答 
案 区 、 提 示 图 片 ( 答 对 显示 笑脸 、 答 错 显 示 器 脸 〉 及 答案 部 分 组 成 。 设 计 页 面 时 ， 题 号 、 参 
与 运算 的 数 、 运 算 符 、 等 于 号 及 答案 可 以 用 View ae 输入 答案 区 可 以 加 ] 
用 input 组 件 实现 ， 提 示 图 片 可 以 用 image 组 件 实现 。 通 过 页 面 凶 辑 代 码 生 成 
10 对 数据 ， 并 根据 运算 符 求 出 运算 结果 后 存放 在 数组 中 ， 然 后 在 页 面 结 构 代 i 
码 中 使 用 wx:for 进行 列表 泻 染 , 显示 10 道 题目 , 并 使 用 wx:if 进行 条 件 演 染 ， 
控制 提示 图 片 显示 。 详 细 代 码 如 下 
1 <!--index.wxml-——> 
2 <view class='container'> 
总 <view class='line' wx:for="{{digitals}}" wx:for-index="itemIndex" wx:for- 
item="itemName"> 

<view class='lineno'>{{itemName.id}}. </view> 


4 

本 <view class='lineno'>{{itemName.da}}</view> 
6 <view class='lineno'>+</view> 
7 
8 


<view class='lineno'>{{itemName.db}}</view> 
<view class='lineno'>=</view> 


9 <input value='{{inputValue}}' placeholder=' 输 入 答案 ' bindinput= 
"bindKeyInput" id="{{itemIndex}}"> </input> 

10 <image src="{{imgsrc[itemIndex]}}"></image> 

Eh <view wx:if="{{flag}}" class='lineno'>{{itemName.dr}}</view> 
12 </view> 

13 <View class="'btn'> 

14 <button bindtap='btnOk'> 确 认 提交 </button> 

ES <button bindtap='btnAgain'> 再 来 一 次 </button> 

16 </view> 


17 </view> 
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上 述 代 码 第 3 行使 用 wx:for 泻 染 语句 绑 定 了 digitals 数组 ， 该 数组 元 素 是 Object 类 型 ， 
其 中 包含 题 号 〈id)、 参 与 运算 的 第 一 个 数 〈da)、 参 与 运算 的 第 二 个 数 (db) 和 根据 运算 符 
计算 出 的 标准 结果 〈dr)。 第 4 行 、 第 5 行 、 第 7 行 在 view 组 件 上 分 别 绑 定 对 应 数组 元 素 的 
序号 〈id)、 参 与 运算 的 第 一 个 数 (da) 和 参与 运算 的 第 二 个 数 (db)。 第 9 行 代 码 用 bindinput 
属性 绑 定 键盘 输入 事件 bindKeyInput( )， 用 id 属性 绑 定 每 个 input 组 件 的 唯一 标识 。 此 处 的 
id 绑 定 input 组 件 的 唯一 标识 很 重要 ， 在 页 面 罗 辑 代码 中 获取 input 组 件 输入 的 数据 就 是 通过 
该 这 来 实现 的 。 第 10 行 代码 用 src 属性 绑 定 imgSrc 数组 来 显示 提示 图 片 。 第 11 行 代码 使 用 
wx: 耻 条 件 泻 染 语句 绑 定 fag 变量 , 用 于 控制 当 用 户 单 击 了 “确认 提交 ”按钮 后 才 会 显示 标准 
答案 。 第 13~16 行 代码 定义 了 “确认 提交 ”和 “再 来 一 次 ”按钮 ， 并 使 用 bindtap 属性 绑 定 
了 btnOk( ) 和 btnAgain( ) 方 法 ， 分 别 用 于 处 理 用 户 提交 结果 后 的 情况 和 重新 生成 10 道 题目 。 

为 了 达到 图 4.9 所 示 的 美观 效果 ， 还 需要 定义 对 应 的 样式 文件 ， 代 码 如 下 : 


1 dire 

2 height: 100rpx; 

让 display: flex; 

4 flex-direction: row; 
二 padding-left: 40rpx; 
6 padding-right: 40rpx; 
了 

8 .lineno { 

9 width: 80rpx; 

10 height: 100rpx; 

下 

12 input { 


下 border: lrpx; 

14 width: 150rpx; 

ES height: 60rpx; 

16 background: yellow; 
ET 

18 image { 

19 width: 60rpx; 

20 height: 60rpx; 
2 

22 pin 

23 display: flex; 

24 flex-direction: row; 
人 25 

26 button { 

2 width: 50%; 

28 color: blue; 

2 background: #eeefff; 
30 3 


另外 ， 提 示 图 片 (yes.jpg 和 no.jpg〉 和 页 面 底 端 导航 条 上 显示 的 图 片 (pl.png、p2.png、 
p3.png 和 p4.png)， 需 要 预先 在 项 目的 pages 文件 夹 下 创建 一 个 images 文件 夹 保存 。 页 面 底 
端的 导航 条 需要 修改 小 程序 项 目 文件 夹 下 的 appjson 文件 ， 其 代码 如 下 : 

{ 
溉 “pages"s 
3 "pages/index/index", 


PALA 
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4 "pages/reduce/reduce", 

5 "pages/multi/multi", 

6 "pages/division/division™" 

7 ]， 

8 "window": { 

9 "backgroundTextStyle": "light", 

10 "navigationBarBackgroundColor": "#eeefff", 

四 "navigationBarTitleText": "小 学 算术 题 "， 

下 2 "navigationBarTextStyle": "black" 

13 }, 

14 "abbarm: { 

Ss "selectedColor": "#1296db", 

16 i 

和 { 

18 "pagePath": "pages/index/index", 

19 "text": "加 ", 

20 "iconPath": "/pages/images/pl.png", 

21 "selectedIconPath": "/pages/images/pl.png" 
pp 上 

pa { 

24 "pagePath": "pages/reduce/reduce", 

25 "text": " 减 

26 "iconPath": "/pages/images/p2.png", 

| "selectedIconPath": "/pages/images/p2.png" 
28 }, 

29. { 

30 "pagePath": "pages/multi/multi", 

3 EE 

32 "iconPath": "/pages/images/p3.png", 

33 "selectedIconPath": "/pages/images/p3.png" 
34 }, 

35 { 

36 "pagePath": "pages/division/division", 

37 -text" 的 = 

38 "iconPath": "/pages/images/p4.png", 

39 "selectedIconPath": "/pages/images/p4.png" 
40 } 

41 ] 

42 } 

3. 0 


小 学 生 算术 题 的 功能 实现 

小 学 生 算 术 题 的 实现 逻辑 比较 简单 。 首 先 ， 在 页 面 加 载 时 连续 产生 10 组 加 ;hs 
0~100 的 数值 ， 并 根据 每 组 数值 和 运算 符 计算 出 运算 结果 ， 保 存在 digitals 数 区 
组 中 〈 即 在 页 面 逻辑 文件 的 onLoad( ) 函 数 中 实现 )， 使 用 wx:for 列表 泻 染 的 方 i 
式 传送 给 页 面 结构 文件 并 显示 ; 然后 用 户 输入 自己 的 运算 结果 , 完毕 后 单 击 “ 确 回 
认 提 交 ” 按 钮 ， 在 “确认 提交 ” 绑 定 事件 中 将 提交 的 答案 和 页 面 加 载 时 计算 出 。 4223 
的 答案 逐个 对 照 , 如 果 答 案 正确 , 就 将 imgSrc 数组 对 应 的 元 素 值 修改 为 笑脸 图 片 (yesjpg)， 
并 将 score 值 加 10(score 用 于 存放 得 分 ,每 正确 一 题 加 10 分), 否则 修改 为 汪 脸 图 片 (no.jpg); 
最 后 使 用 wx.showToast( ) 方 法 显示 最 终 成 绩 提示 信息 。 而 在 “再 来 一 次 ”按钮 绑 定 事件 中 ， 
只 需要 直接 调用 onLoad( ) 函 数 即 可 。 页 面 罗 辑 文件 代码 如 下 : 
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//index.js 
Page({ 
// 初 始 化 数据 
data: { 
inputValue:""， // 用 于 绑 定 input 组 件 的 value 属性 
cigitals: [i // 用 于 存放 每 道 数 学 题 信息 ( 含 题 号 、 数 1、 数 2 和 运算 结果 ) 
imgsrc: []， // 用 于 存放 答对 提示 图 路 径 
flag: false, // 用 于 标记 是 否 提 交 完 毕 
userAnswer: []， // 用 于 保存 提交 的 每 道 题 用 户 输入 的 答案 
score:0 // 用 于 计 分 


}, 
// 页 面 加 载 事件 
onLoad: function (options) { 
this.data.inputValue=""; 
this.data.digitals=[]; 
this.data.imgsrc=[]; 
var tiId = 1; ”// 用 于 产生 0-100 的 数据 
for (var = OF i < i107 4+) { 
var n=0, m= 100; 
var w=m-n; 
var tida = parseInt (Math.random( ) * w + n，10)// 返 回 十 进 制 整数 
var tidb = parseInt (Math.random( ) * w + n，10)// 返 回 十 进 制 整数 


var tidr = tida + tidb // 计 算 两 数 之 和 
this.data.digitals.push({ // 向 digitals 数组 中 推送 数据 对 象 
GE // 题 号 


da: tida, // 第 1 个 数 
db: tidb, // 第 2 个 数 
dr:: Eidr // 答 案 
1); 
this.data.imgSrc.push("../images/yes.jpg");// 默 认 加 载 笑脸 图 片 
tird++; // 题 号 自 增 
} 
this.setData({ 
digitals: this.data.digitals, 
imgsrc:this.data.imgsrc, 
inputValue:this.data.inputValue 
]) 7 


}, 

// 确 认 提 交 按 钮 事件 

btnok: function(e) { 
this.data.score =0 
for (var = On < LO oy 


if (this.data.userAnswer[i] != this.data.digitals[i].dr) { 
this.data.imgsrc[i] = "../images/no.jpg" / /答案 错误 
}elsef 
this.data.imgsrc[i] = "../images/yes.jpg" // 答 案 正确 
this.data.score = this-data-score+107 // 分 数 加 10 
} 
// 弹 出 成 绩 消息 提示 信息 


WwWX:WX-ShowToast ({ 
title: ' 你 的 成 绩 : '+this.data.score, 
icon:'loading"' 

}) 


TA 
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54 } 

55 this.setDatal({ 

56 imgSrc: this.data.imgsrc, 
二 了 flag: true, 

58 score:this.data.score 

59 }) 

60 


} 
61 // 获 取 input 中 输入 数据 事件 
62 bindKeyInput: function(e) { 


63 this.data.userAnswer[e.currentTarget.id] = e.detail.value; 
64 this.setDatal({ 

65 userAnswer: this.data.userAnswer 

66 }) 

67 


}, 
68 ”// 再 来 一 次 按钮 事件 
69 btnRgain: function ( ){ 
70 this.onLoad( ); // 调 用 onLoad( ) 函数 
六 } 
2 


上 述 代码 的 第 19~22 行 代码 用 于 生成 (0,100] 的 随机 整数 .在 JavaScript 中 ,Mathrandom() 
函数 返回 值 为 [0,1) 的 伪 随机 数 。 

。 生成 mm, m) 的 随机 整数 ， 可 以 用 parseInt(Math random( *(m-n)+n, 10) 表 达 式 。 

。 生成 CQ, m] 的 随机 整数 ， 可 以 用 Math.floor(Math random( )*(m-n)+n) + 1 表达 式 。 

。 生成 ln, m) 的 随机 整数 ， 可 以 用 Mathround(Mathrandom()*(m-n)+nt1) 或 者 

Math_.ceil(Math random( )*(m-n)+tn+l) 表 达 式 。 
。 生成 mm 的 随机 整数 ， 可 以 用 Mathround(Mathrandom()*(m-n)tn) 或 者 
Math_.ceil(Math random( )*(m-n)+n) 表 达 式 。 

: 面 仅 列 出 了 加 法 运算 页 面 的 详细 逻辑 代码 ， 减 法 运算 、 乘 法 运算 和 除法 运算 的 逻辑 代 
码 与 加 法 运算 的 代码 类 似 ， 读 者 可 以 参阅 代码 包 lesson4_math 文件 夹 中 的 内 容 ， 不 再 歼 述 。 


OO 4.3， 少 扑 克 游戏 的 设计 与 实现 


基于 扑克 牌 的 小 游戏 很 多 ， 本 案例 实现 3 张 或 多 张 扑克 牌 按 随 机 顺序 摆 放 在 屏幕 上 ， 但 
只 能 在 屏幕 中 央 显示 一 张 扑 克 牌 的 背面 (图 4.11), 由 用 户 在 规定 的 时 间 内 猜测 哪 张 是 红 桃 A， 
如 果 认 为 是 红 桃 A， 就 单 击 该 扑克 牌 ， 如 果 认 为 不 是 红 桃 A， 可 以 向 左 或 向 右 滚动 扑克 牌 并 
选择 ， 如 果 在 规定 时 间 没有 猜 中 ， 就 给 出 错误 提示 《如 图 4.12 所 示 )。 本 案例 使 用 progress 
组 件 〈 进 度 条 ) 实现 计时 功能 、 使 用 scroll-view 组 件 〈 可 滚动 视图 区 域 ) 实现 扑克 牌 图 片 的 
左右 滚动 功能 。 另 外 ， 为 了 增强 游戏 界面 的 趣味 性 ， 还 使 用 了 switch 组 件 〈 开 关 选 择 器 ) 实 
现 开 关 灯 效果 、radio-group/radio 组 件 〈 单 选 按钮 组 / 单 选 按钮 ) 实现 游戏 难 易 回 和 
度 的 选择 。 号 


4.3.1 ”预备 知识 


setlnterval( ) 函 数 43.11 

setInterval( ) 函 数 是 JavaScript 提供 的 指定 周期 执行 函数 ， 它 表示 每 隔 一 段 时 间 执 行 一 个 
操作 ， 直 到 窗口 关闭 、 程 序 停止 或 调用 clearInterval( ) 函 数 才 会 结束 执行 该 操作 。 微 信 小 程序 
虽然 没有 window 对 象 ， 但 在 实际 的 应 用 开发 中 ， 也 可 以 使 用 该 函数 实现 各 种 按 周期 〈 以 毫 
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秒 计 ) 执行 的 操作 。 
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开始 重 玩 开始 重 玩 
说 明 : 玩家 单 击 “开始 ”按钮 后 可 以 左右 ; 玩家 单 击 “ 开 始 ” 按 钮 后 可 以 左右 | 
pee ， 并 在 10 和 种 内 单 击 认为 “ 红 桃 动 扑克 牌 ， 并 在 10 秒 钟 内 单 击 认为 “ 红 桃 
|A” 的 扑克 牌 ! ”的 扑克 牌 ! 
图 4.11 猜 扑 克 游戏 (1) 图 4.12 猜 扑 克 游 戏 (2) 


setinterval( ) 丽 数 的 使 用 形式 有 如 下 两 种 ， 其 参数 说 明 如 表 4-6 所 示 ， 该 丽 数 返回 一 个 人 D 
值 (数值 型 数据 )， 可 以 将 该 ID 值 传递 给 clearnterval( ) 函 数 ， 用 于 取消 setinterval( ) 瑞 数 中 
定义 的 正在 周期 执行 的 操作 。 


表 4-6 setlnterval( ) 函 数 的 参数 及 功能 说 明 


参数 功 能 
code/function 必需 。 要 调用 的 功能 代码 或 一 个 函数 
milliseconds 必需 。 周 期 性 执行 或 调用 code/function 的 时 间 间 隔 ， 单 位 为 毫秒 (ms) 
paraml, param?2, ... 可 选 。 传 递 给 执行 code/function 的 其 他 参数 (IE9 及 其 更 早 版 本 不 支持 该 参数 ) 


下 面 以 一 个 60s 倒计时 小 程序 的 实现 过 程 介绍 setInterval( ) 函 数 的 用 法 。 
(1) setInterval (code, milliseconds)。 


例如 ， 要 实现 每 隔 ls num 值 自 增 1， 当 num 值 为 100 时 结束 自 增 ， 其 功能 代码 如 下 : 


count intervall: function ( ) { 
var num = 0 
Var ID = setInterval (function ( ) { 
num++ 
if (num == 100) { 
clearInterval (ID) 
} 
console.1og (" 输 出 为 : " + num) 
}, 1000) 
}, 


上 述 代码 的 第 3~9 行 定义 了 一 个 周期 执行 函数 ， 该 周期 函数 有 两 个 参数 : 第 1 个 参数 定 
义 了 执行 具体 操作 的 匿名 函数 , 第 2 个 参数 指定 了 执行 周期 1000ms; 并 将 该 周期 函数 的 返回 


Fowamuwm 必 wm 


口 
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值 赋值 给 ID 变量 ， 用 于 当 num 值 为 100 时 取消 执行 当前 周期 函数 。 第 5-7 行 表示 如 果 num 
值 为 100， 则 取消 当前 的 功能 执行 。 


Daouw 必 wm 


加 


(2) setInterval (function, milliseconds, paraml, param2, … )。 
用 这 种 形式 实现 上 述 功能 ， 可 以 使 用 如 下 代码 : 


data: { 
num: 0， // 用 于 保存 自 增值 
ID: "" // 用 于 保存 周期 函数 ID 
}, 
count interval2: function ( ) { 
this.data.ID = setInterval (this.numFunction，1000, "输出 为 : ") 
}, 
numFunction: function (info) {//info 为 参数 
this.data.num = ++this.data.num 
Ff (Ehis. data. nu == 100) 
ClearInterval (this.data.ID) 
} 
console.1og (info + this.data.num) 
this.setData ({ 
num: this.data.num 
1 
}, 


上 述 代码 第 6 行 表示 在 周期 函数 setInterval( ) 中 每 隔 1000ms 调用 一 次 自 定义 的 


numFunction( ) 函 数 ， 并 将 “输出 为 : ”传递 给 info 作为 实 参 值 。 


onoODp 


(3) 页 面 结构 文件 代码 。 


<!--pages/setinterval/setinterval .wxml-—-> 
<view class="container content"> 
<view class="content time">{{time}}S</view> 
<view class="content btn"> 
<button class="btn start" bindtap="startTap"> 开 始 </button> 
<button class="btn stop" bindtap="stopTap"> 停 止 </button> 
</view> 
</view> 


页 面 结构 文件 比较 简单 ， 用 view 组 件 显示 倒计时 时 间 ， 用 2 个 button 组 件 实现 “开始 ” 计 


时 和 “停止 ”计时 按钮 ， 并 绑 定 对 应 的 事件 startTap 和 stopTap。 页 面 运行 效果 如 图 4.13 所 示 。 
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图 4.13 ”60s 倒计时 
(4) 页 面 样式 文件 代码 。 


/* pages/setinterval/setinterval.wXSS */ 


Pagef 
width: 100%; 


3 


区 9 第 4 章 基 林 组件 [ 辐 


height: 100%; 

.container content { 
height: 100%; 
width: 100%; 
text-align: center; 

} 

-Content btn{ 
display: flex; 
flex-direction: row; 

} 

.content time { 
color: forestgreen; 
font-size: 50rpx; 

} 

btn start { 
text-align: center; 
background-color: yellow; 
flex:1; 

} 

-btn Stop { 
text-align: center; 
background-color: red; 
flex:1; 


上 述 代码 第 11~14 行 定义 button 组 件 使 用 flex 水 平 布局 , 第 22 行 和 第 27 行 代码 定义 了 


两 个 button 组 件 等 宽 显示 。 


PPoOoAnoOpp 
上 口 
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(5) 页 面 逻 辑 功能 代码 。 


//pages/setinterval/setinterval.js 
Page ({ 
data: { 
time: 60, // 初 始 时 间 
interval: 0， // 计 时 器 
]}， 
startTap: function ( ) {// 开 始 倒计时 
var that = this; 
this.data.time = 60; 
this.data.interval = setInterval(function ( ) { 
that .data.time——; 
that .setData ({ 
time: that.data.time 
jy 
if (that.data.time == 0) { 
clearInterval (that .data.interval) // 时 间 到 0， 取消 周期 函数 
} 
}, 1000) 
that .setData({ 
interval: that.data.interval 
}) 
}, 
stopTap: function ( ) {// 暂 停 计时 
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24 clearInterval (this.data.interval) 
25 ]}， 
6 


上 述 代码 第 8 行 定义 了 that 变量 用 来 存储 原 页 面 的 对 象 , 然后 在 第 11~12 行 代码 中 用 that 
变量 引用 原 页 面 中 的 对 象 , 因为 第 10 行 代码 中 定义 了 一 个 匿名 函数 实现 相应 的 功能 , 操作 对 
象 已 经 发 生 改变 。 在 JavaScript 中 , this 是 指向 当前 对 象 的 一 个 指针 , 当 处 于 不 同 的 对 象 中 时 ， 
this 指针 所 指 对 象 会 随 之 改变 ，this 在 微 信 开 发 工具 中 以 蓝 色 显示 , 它 是 系统 变量 。 因 此 , 在 
类 似 的 嵌 套 实体 中 ， 需 要 用 另外 一 个 变量 操作 this 指定 的 原 对 象 。 

progress 

progress (进度 条 组 件 ) 用 于 直观 显示 一 项 任务 的 执行 进度 。 例如， 数据 下 载 进度 、 视 频 


播放 进度 、 考 试 时 间 进 度 和 程序 安装 进度 等 。 为 了 适应 不 同 的 应 用 环境 ， 微 信 小 程序 框架 提 
供 了 不 同属 性 控制 进度 条 的 样式 ， 其 常用 属性 及 功能 说 明 如 表 4-7 所 示 。 
表 4-7 progress 组 件 的 属性 及 功能 说 明 
属性 类 型 功 能 

percent Float 百分比 0~100 

show-info Boolean 在 进度 条 右 侧 显示 百分比 ， 默 认 值 为 false (不 显示 ) 

stroke-width Number 进度 条 线 的 宽度 ， 单 位 为 px， 默认 值 为 6 

color Color 进度 条 颜色 ， 默 认 值 为 #09BB07 

activeColor Color 已 选择 的 进度 条 的 颜色 

backgroundColor | Color 未 选择 的 进度 条 的 颜色 

active Boolean 进度 条 从 左 往 右 的 动画 ， 默 认 值 为 false 

_ _， backwards: 动画 从 头 播 ，forwards: 动画 从 上 次 结束 点 接着 播 ， 默 认 
active-mode String 信 为 baalwviids 
bindactiveend EventHandle | 动画 完成 事件 


以 下 面 一 段 代码 为 例 ， 介 绍 表 4-7 中 相关 属性 的 用 法 。 


<progress percent="20" show-info /> 

<progress percent="40" stroke-width="12" /> 

<progress percent="60" color="pink" /> 

<progress percent="80" active /> 

<progress percent="60" activeColor="pink" backgroundColor="'#00ff00'/> 


上 述 第 1 行 代码 表示 当前 进度 条 的 进度 值 为 20，show-info 属性 值 为 tue, 即 在 进度 条 右 
侧 显示 进度 值 20; 第 2 行 代码 表示 当前 进度 条 的 进度 值 为 40，stroke-width 属性 值 为 12px， 
即 当前 进度 的 宽度 为 12px; 第 3 行 代码 表示 当前 进度 条 的 进度 值 为 60, color 的 属性 值 为 pink， 
即 当前 进度 条 的 进度 用 品 红 显 示 ; 第 4 行 代码 表示 当前 进度 条 的 进度 值 为 80，active 属性 值 
默认 为 tue， 即 进度 条 动态 显示 到 进度 80 处 ; 第 5 行 代码 表示 当前 进度 条 的 进度 值 为 60， 
activeColor 属性 将 已 选择 进度 条 的 颜色 设置 为 品 红 ， backgroundColor 属性 将 未 选择 的 进度 条 
颜色 设置 为 黄色 。 

radio-group 与 radio 

Iadio-group 〈 单 选 按钮 组 组 件 ) 和 radio〈 单 选 按钮 选项 组 件 ) 组 合 在 一 
起 使 用 ， 为 用 户 提供 “多 选 一 ”的 操作 模式 ， 是 微 信 小 程序 开发 中 常用 的 一 
种 组 件 。 例 如 ， 用 户 注册 时 选择 的 性 别 上 只 能 从 “ 男 ” 或 “ 女 ” 中 选择 一 个 。 


a 性 
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radio-group 是 用 来 放置 多 个 radio 的 容器 , 它 有 一 个 绑 定 事件 bindchange， 当 radio-group 
中 的 选中 项 发 生变 化 时 ， 就 会 触发 该 事件 。radio 组 件 的 常用 属性 及 功能 说 明 如 表 4-8 所 示 。 


表 4-8 radio 组 件 的 属性 及 功能 说 明 


能 


属性 功 


value | String 当 radio 选中 时 ，radio-group 的 chang 事件 会 携带 radio 的 value 值 
checked | Boolean 当前 是 否 选中 ， 默 认 值 为 false (不 选中 ) 


当前 是 否 禁用 ， 默 认 值 为 false 不 禁用 ) 
选中 框 内 选中 符号 的 颜色 


disabled 


例如 ， 要 实现 图 4.14 所 示 效 果 ， 可 以 使 用 如 下 代码 实现 : 
Q@ 页 面 结构 文件 代码 。 


<!--pages/radio/radio.wxml--> 
<radio-group bindchange="radioChange"> 
<View> 
<radio value=" 男 " checkeqd /> 男 
<radio value=" 女 " /> 女 
</view> 
</radio-group> 
<text> 你 选择 的 性 别 是 : { {selected}}</text> 


@ 页 面 逻辑 文件 代码 。 


Page ({ 
data: { 
selected:" 男 " 
}， 
radioChange:function(e){ 
Var value = e.detail .value; 
this.setData({f 
selected:value 
}) 
} 
}) 
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另 @ 女 
你 选择 的 性 别 是 : 女 


图 4.14 radio 组 件 实现 性 别 选择 


switch 

switch〈 开 关 选 择 器 组 件 ) 通常 用 于 两 种 状态 改变 时 要 实现 的 功能 ， 比 如 打开 Wi-Fi 或 关 
闭 Wi-Fi。switch 的 常用 属性 及 功能 说 明 如 表 4-9 所 示 。 

如 果 switch 组 件 的 type 属性 值 为 checkbox， 则 该 组 件 的 显示 效果 、 使 用 方法 与 
checkedbox 组 件 完全 相同 。 
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表 4-9 switch 组 件 的 属性 及 功能 说 明 


属性 类 型 功 能 
checked Boolean 是 否 选 中 ， 默 认 值 为 lse (没有 选中 ) 
disabled | Boolean | 是 否 禁用 ， 默 认 值 为 false (不 禁用 ) 
type | string | 样式 ， 可 以 为 switch 或 checkbox， 默 认 值 为 switch 
bindchange | EventHandle | checked 改变 时 触发 change 事件 ，event.detail={ value:checked} 
color Color switch 的 颜色 


下 面 以 一 个 开关 灯 的 示例 介绍 switch 的 用 法 ， 即 如 果 单 击 “ 关 灯 ” 开 关 ， 则 灯 灭 ， 如果 
单 击 “ 开 灯 ” 则 灯亮 。 运 行 效 果 如 图 4.15 所 示 。 
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4.15 ”switch 组 件 实现 开关 灯 
@ 页 面 结构 文 件 代码 。 


<!--pages/switch/switch.wzxml-—-> 

<view class='conview'> 
<image src="{{imgsrc}}"></image> 
<switch wx:if="{ {flag}}" bindchange='swChange' checked> 关 灯 </switch> 
<switch wx:else bindchange='swChange'> 开 灯 </switch> 

</view> 


上 上述 第 4-5 行 代码 表示 当 flag 为 tue 时 ，switch 组 件 右 侧 显示 “ 关 灯 ”， 否 则 显示 
“ 开 灯 ”。 
@ 页 面 样式 文件 代码 。 
/* pages/switch/switch.wxss */ 
.conviewt{ 
display: flex; 
flex-direction: column; 


align-items: center; 
$ 


@ 页 面 逻 辑 文件 代码 。 


// pages/switch/switch.js 
区 Page ({ 


au 必 sw 
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3 datas { 

4 imgSrc: "/pages/images/dengh.png", 

5 flag: false 

6 ]， 

7 swChange: function ( ) { 

8 if(this.data.flag){ 

9 this.data.flag = false 

10 this.data.imgSrc = "/pages/images/dengh.png" 
EE }elsef 

12 this.data.flag = true 

I3 this.data.imgSrc = "/pages/images/dengl .png" 
14 } 

15 this.setData({ 

16 imgsrc: this.data.imgsrc, 

7 flag:this.data.flag 

18 }) 

9 3 

20 1}) 


从 上 述 代码 可 以 看 出 ， 首 先 在 小 程序 项 目的 pages 文件 夹 下 创建 一 个 images 文件 夹 ， 并 
将 表示 灯亮 的 图 片 (denglLpng) 和 灯 灭 的 图 片 dengh.png) 存放 在 该 文件 夹 中 ;然后 在 页 面 
地 和 辑 代 码 中 用 flag 变量 控制 switch 的 开关 状态 ， 如 果 是 开 状态 〈 即 flag 为 tue)， 则 将 页 面 
结构 文件 中 绑 定 的 imgSrc 变量 修改 为 表示 灯 灭 的 图 片 ( 如 代码 第 10 行 )， 并 将 flag 修改 为 
false， 奋 则 将 imgSrc 变量 修改 为 表示 灯亮 的 图 片 〈 如 代码 第 13 行 )， 并 将 flag 修改 为 true; 
最 后 用 setData( ) 方 法 将 更 新 结果 反馈 给 页 面 结构 文件 。 


4.3.2” 猜 扑 死 游戏 的 实现 


主 界面 的 设计 

根据 图 4.11 的 显示 效果 , 进行 主 界面 设计 时 使 用 progress 组 件 , 用 于 显示 回 ; 
计时 进度 。 使 用 scroll-view 组 件 ， 让 加 载 的 image 组 件 中 的 扑克 牌 图 片 实现 态 
右 滚动 ， 使 用 switch 组 件 实现 开 灯 、 关 灯 效 果 ， 使 用 radio-group/radio 组 件 实 
现 难 易 度 选择 效果 ， 使 用 button 组 件 实现 开始 、 重 玩 按钮 ， 使 用 view 组 件 显 回 
示 游 戏说 明 。 4.3.2.1 

Q@ 页 面 结构 文件 代码 。 


E <view class='pageclass' style='background:{{bcolor}}'> 
2 <progress percent="{{percent}}" show-info /> 

3 <scroll-view class='svclass' scroll-x> 

4 <view class='line'> 

5 <View wx:for="'{{imgPork}}'> 

6 <image data-id="{ {index}}" bindtap="'imgClick' src='{{item}}'> </image> 
7 </view> 

8 </view> 

9 </scroll-view> 

10 <view class='swclass'> 

EL <label>{{swInfo}}</label> 

12 <switch bindchange='swchange'></switch> 

13 <radio-group bindchange='rgeasy'> 

14 <radio value=' 易 ' checked> 易 </radio> 


3 <radio value=' 难 '> 难 </radio> 
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16 </radio-group> 

E7 </view> 

18 <View class='btn'> 

19 <button bindtap="'btnstart" > 开始 </button> 
20 <button bindtap="'btnAgain'> 重 玩 </button> 
A </view> 


22 <view> 游 戏说 明 ; 玩家 单 击 “开始 ”按钮 后 可 以 左右 滚动 扑克 牌 ， 并 在 10 秒 钟 内 单 击 认为 “ 红 桃 
A” 的 扑克 牌 ! </view> 


23 </view> 


上 述 代码 第 2 行 定义 一 个 显示 进度 值 的 进度 条 , 进度 值 由 页 面 逻辑 文件 中 定义 的 percent 
变量 控制 ， 第 3-9 行 用 scroll-view 组 件 实现 可 以 左右 滚动 的 扑克 牌 功 能 ， 并 用 scroll-x 属性 
设置 该 组 件 内 的 内 容 可 以 左右 滚动 , 其 中 第 $ 行 代码 用 wx:for 列表 演 染 语句 和 存放 扑克 牌 图 
片 的 数组 imgPork 在 scroll-view 中 的 image 组 件 中 显示 扑克 牌 图 片 ， 第 6 行 代码 用 data-id 属 
性 绑 定 id 数据 ， 用 于 标识 该 image 组 件 绑 定 的 是 imgPork[] 数 组 中 的 哪个 元 素 ， 以 便 传 递 给 
页 面 逻 辑 文件 处 理 单 击 扑克 牌 图 片 事 件 imgClick()， 也 就 是 标记 单 击 的 哪 一 张 扑 克 牌 。 第 
10~17 行 代码 用 于 实现 游戏 开关 和 游戏 难 易 度 选择 界面 ， 其 中 第 11~12 行 用 于 设置 开关 前 面 
显示 的 信息 及 开关 效果 , 通过 在 label 组 件 中 绑 定 swInfo 数据 显示 “ 开 灯 ”或 “ 关 灯 ”、 在 switch 
组 件 上 绑 定 swchang( ) 事 件 实现 开关 状态 变化 功能 ; 第 13~16 行 设置 游戏 难 易 度 选择 效果 ， 
并 绑 定 当选 项 变化 时 的 执行 事件 rgeasy( )。 第 18~21 行 代码 分 别 定义 了 “开始 ”按钮 和 “ 重 
玩 ” 按 钮 ， 并 绑 定 了 对 应 的 事件 btnStart( ) 和 btnAgain( )。 

@ 页 面 样式 文件 代码 。 


page { 
width: 100%; 
height: 100%; 

3. 

.pageclass { 
height: 100%; 
background: yellowgreen; 
display: flex; 

9 flex-direction: column; 

10 align-items: center; 

Eh 

12 progress { 

了 margin-left: 15rpx; 

14 width: 95%; 

hE 

16 .svclass { 

Ey margin-top: 100rpx; 

18 width: 419rpx; 

正 9 和 

20 .line { 

疙 时 display: flex; 


wauwmmwmn 


2 flex-direction: row; 
之 3 width: 419rpx; 
之 此 坟 


25 image { 

26 margin-right: 5rpx; 
2 width: 419rpx; 
60 


二 第 4 章 基本 组 件 


29 .swclass { 
30 display: flex; 


31 flex-direction: row; 
32 align-content: center; 
33 让 

34 .btnf{ 

3 display: flex; 

36 flex-direction: row; 
| align-content: center; 
S090 


上 述 代 码 的 第 16~19 行 代 码 用 于 控制 scroll-view 组 件 的 宽度 ， 该 宽度 值 保持 与 放置 一 张 
扑克 牌 图片 的 image 组 件 宽度 一 致 ， 第 20~24 行 代码 用 于 控制 加 载 的 image 组 件 的 水 平 摆 
布 ， 第 25~28 行 代码 用 于 控制 image 对 象 的 宽度 及 对 和 象 与 对 象 之 间 的 间距 ， 第 29~33 行 代码 
用 于 控制 switch、radio-group 组 件 的 水 平 摆布 ,第 34~38 行 用 于 控制 “开始 ”“ 重 玩 ” 按 钮 的 
水 平 摆布 。 

功能 实现 

本 小 程序 实现 的 游戏 功能 分 为 难 和 易 两 种 , 难 游戏 的 游戏 规则 是 10s 内 在 洪 芒 
3 张 扑克 牌 中 选 出 红 桃 A， 容 易 游戏 的 游戏 规则 是 20s 内 在 3 张 扑克 牌 中 选 出 “ 国 迪 安生 各 
红 桃 A。 当 然 ， 游 戏 的 难 易 度 还 可 以 通过 扑克 牌 的 张 数 来 控制 ， 限 于 篇 幅 ， 4.3.2.2 
本 案例 以 时 间 控 制 游戏 难 易 度 的 实现 。 这 些 扑 克 牌 图 片 都 存放 在 小 程序 项 目的 images 文件 夹 
中 ， 其 中 pork.png 图 片 是 扑克 牌 背面 图 片 ，reda.png 图 片 是 红 桃 A 图 片 ，fanga.png 图 片 是 方 
块 A 图 片 ，flowera.png 图 片 是 梅花 A 图 片 。 下 面 列 出 页 面 逻 辑 文件 中 的 主要 功能 代码 。 

(1) 初始 化 数据 。 


下 data: { 

2 bcolor: "cyan"，// 默 认 关 灯 效果 的 背景 色 

3 imgPork: ["/images/pork.png", "/images/pork.png", "/images/pork.png"], 
4 imgsrc: ["/images/reda.png","/images/fanga.png","/images/flowera.png"], 
5 easyFlag: true， // 默 认 游戏 难 易 度 〈 易 ) 

6 time: 10, // 默 认 游戏 时 间 (10s) 

7 inter: '', // 周 期 函数 返回 值 

8 percent: 0, // 进 度 条 进度 值 

9 swInfo: ' 开 灯 '， // 默 认 开关 前 显示 信息 

10 startFlag: false,// 默 认 游戏 未 开始 

了 redIndex:0, // 默 认 红 桃 A 扑克 牌 在 数组 中 的 下 标 

12 }, 


上 述 代 码 的 bcolor 变量 用 于 存放 开关 灯 效 果 的 背景 色 (bcolor 值 为 cyan 表示 关 灯 效果 ， 
bcolor 值 为 comsilk 表示 开 灯 效果 ); imgPork[] 数 组 用 于 存放 3 张 扑克 有 牌 背面 图 片 对 应 的 文件 
路 径 ，imgSrc[] 数 组 用 于 按 顺序 存放 红 桃 A、 方 块 A 和 梅花 A 图 片 对 应 的 文件 路 径 ; easyFlag 
变量 用 于 存放 游戏 难 易 度 ; time 变量 用 于 存放 游戏 时 间 ; inter 变量 用 于 存放 setInterval( ) 函 数 
的 返回 值 ， 以 取消 周期 函数 的 执行 ，percent 变量 用 于 存放 进度 条 的 进度 值 ， swInfo 用 于 存放 
开关 前 面 显示 “ 开 灯 ”或 “ 关 灯 ”的 信息 ; startFlag 变量 用 于 存放 “开始 ”游戏 按钮 的 状态 ， 
当 游 戏 开 始 才 可 以 单 击 image 组 件 猜 扑克 、 游 戏 计时 等 ，redIndex 变量 用 于 存放 游戏 每 次 随 
机 产生 的 红 桃 A 存放 在 imgSrc[] 数 组 中 的 下 标 。 

(2) 页 面 加载 事 件 。 
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工 onLoad: function (options) { 

2 // 产 生 [0，3) 的 随机 整数 ， 用 于 随机 产生 红 桃 A 所 在 数组 的 下 标 

学 this.data.redIndex = parseInt (Math.random( ) * (3 - 0) + 0, 10) 

4 // 判 断 原来 的 红 桃 RA 所 在 的 数组 元 素 下 标 ， 并 与 新 产生 的 红 桃 A 下 标 互 换 ， 即 互 换 扑 克 

5 or (var i = 0 1 < 32 14t) "( 

6 if (this.data.imgsrc[i] == "/pages/images/reda.png") { 

jl this.data.imgsrc[i] = this.data.imgsrc[this.data.redIndex] 

8 this.data.imgsrc[this.data.redIndex] = "/pages/images/reda.png" 
9 } 

10 | 

sh this.setData({ 

Eb imgsrc: this.data.imgsrc, 

3 imgPork: ["/images/pork.png","/images/pork.png","/images/pork.png"], 
14 redIndex: this.data.redIindex 

5 }) 

16 }, 


上 述 代码 第 5~10 行 表示 在 原来 存放 3 张 扑克 牌 的 数组 中 找 出 红 桃 A 所 在 的 数组 元 素 下 
标 i， 然 后 将 新 游戏 中 随机 产生 的 红 桃 A 下 标 〈 即 redIndex 值 )》 对 应 数组 元 素 的 内 容 放 入 原 
红 桃 A 对 应 的 位 置 ( 即 i 值 )， 然 后 将 红 桃 A 图 片 的 路 径 存放 到 新 游戏 中 随机 产生 的 红 桃 A 
下 标 〈 即 redIndex 值 》 对 应 的 数组 元 素 中 。 

(3) 开始 按钮 单 击 事件 。 

只 有 当 用 户 单 击 “ 开 始 ” 游 戏 按钮 后 ， 进 度 条 才能 动态 改变 ， 扑 克 牌 才能 单 击 并 翻转 。 
详细 代码 如 下 : 
下 btnstart: function ( ) { 
2 if (!this.data.startFlag) { 
3 this.data.startFlag = true 
4 this.data.percent = 0 
5 var that = this 
6 this.data.inter = setInterval (function ( ) { 
7 
8 


that.data.percent = that.data.percent + (100 / that.data.time) 
if (that.data.percent >= 100) { 


9 that .gameOver( ) 

10 clearInterval (that.data.inter) 
下 下 } 

2 that.setData ({ 

下 3 percent: that .data.percent 

14 1 

15 }，1000) 

16 } 

17 S153e 

18 { Wx: wx.showToast ({ 

19 title: "对 不 起 ， 按 重 玩 开始 新 游戏 ! '， 
20 icon: 'none', 

届 duration: 1000, 

te }) 

23 } 

24 }, 


上 述 代码 第 2~16 行 表 示 如 果 “ 开 始 ”按钮 没有 被 单 击 ， 并 且 游 戏 没有 执行 ， 则 执行 游 
戏 功 能 ， 否 则 执行 第 18~23 行 代 码 。 其 中 第 6~15 行 定义 了 一 个 周期 执行 函数 ， 用 于 实现 进 
度 条 增加 (每 次 的 增加 值 根据 进度 条 的 最 大 值 进行 计算 )， 如 果 进 度 条 的 值 到 达 100， 则 调用 
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游戏 结果 事件 gameOver ( 自 定 义 的 函数 ) 和 结束 本 周期 执行 函数 。gameOver( ) 自 定义 函数 用 
于 给 出 Toast 提示 信息 ， 其 详细 代码 如 下 : 


1 gameOver: function( ) { // 游 戏 结束 方法 
4 wx.showToast ({ 

3 title: ' 对 不 起 ， 游 戏 结束 ! '， 

4 icon: 'none', 

| duration: 1000, 
6 }) 
A 


wx.showToast( ) 方 法 是 微 信 小 程序 开发 框架 提供 的 ， 它 的 详细 使 用 方法 和 应 用 场景 在 后 
面 章 节 介 绍 。 

(4) 扑克 牌 单 击 事件 。 

当 玩 家 单 击 image 组 件 中 的 某 张 扑克 牌 时 ， 实 现 两 方面 的 功能 。 一 是 判断 单 击 的 牌 是 否 
为 红 桃 A， 并 给 出 相应 提示 信息 ， 另 一 个 功能 是 结束 游戏 ， 并 让 计时 功能 (进度 条 进度 值 改 
变 ) 停止 ， 原 来 显示 的 扑克 牌 背面 图 片 全 部 翻 开 ， 让 玩家 看 到 每 张 扑克 牌 内 容 。 详 细 代 码 
如 下 : 


1 imgClick: function (e) { 

if (this.data.startFlag) { // 如 果 单 击 了 “开始 ”游戏 按钮 
3 clearInterval (this.data.inter) // 单 击 后 ， 进 度 条 停止 改变 

4 this.data.imgPork = this.data.imgsrc // 单 击 后 把 所 有 扑克 翻 开 

加 // 如 果 翻 开 的 扑克 下 标 ( 单 击 ) 与 上 面 随机 产生 的 红 桃 A 下 标 不 一 样 ， 则 表示 猜 错 了 
6 if (e.target.dataset.id != this.data.redIndex) { 

Wx: Wx.ShowToast ({ 

8 title: "对 不 起 ， 错 了 ! '， 

9 icon: 'none', 

10 duration: 1000, 

11 }) 

12 


} else { 
13 WXx: WX.ShowToast ({ 
14 title: '" 太 好 了 ， 猜 对 了 ! '， 
5 icon: 'none', 
16 duration: 1000, 
7 }) 
18 } 
19 this .setData({ 
20 imgPork: this.data.imgPork, 
21 }) 
到 } 
23 elseer // 只 有 单 击 了 “开始 ”游戏 按钮 ， 才 能 开始 游戏 
2 站 WX: WX.ShowToast ({ 
25 title: "对 不 起 ， 请 单 击 开始 按钮 ! '， 
26 icon: 'none', 
27 duration: 1000, 
28 }) 
区 下 
30 3}, 


上 述 代 码 第 2~22 行 表 示 ， 如 果 单 击 了 “开始 ”游戏 按钮 ， 首 先 终止 周期 函数 执行 事件 ， 
以 便 停 止 进度 条 更 新 ， 并 产生 扑克 有 牌 翻 开 效果 ; 然后 判断 单 击 的 扑克 有 牌 id 与 redIndex 是 否 一 
样 ， 如 果 一 样 ， 表 示 猜 牌 成 功 ， 如 果 不 一 样 ， 表 示 猜 牌 不 成 功 ， 并 给 出 相应 提示 。 
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(5) 重 玩 按钮 单 击 事件 。 

重 玩 按钮 实现 的 功能 是 重新 加 载 新 游戏 相关 的 内 容 ， 所 以 在 该 事件 中 可 以 直接 调用 页 面 
的 onLoad( ) 方 法 ， 并 将 进度 条 的 进度 值 重 置 为 0,“ 开 始 ”游戏 标志 重 置 为 “false”。 详 细 代 
人 码 如 下 : 


1 btnAgain: function(){ 
2 this.onLoad () 
3 this.setData({ 
4 percent: 0, 
本 startFlag:false 
6 }) 
六 }, 


(6) 开关 灯 事 件 。 

开关 灯 事 件 实现 的 功能 是 默认 状态 下 开关 为 关 灯 状态 ， 当 打开 开关 ，switch 组 件 前 面 显 
示 “ 开 灯 ” 并 将 游戏 背景 色 设置 为 comsilk 值 ， 和 否则 在 switch 组 件 前 面 显 示 “ 关 灯 ”， 并 将 
游戏 背景 色 设 置 为 cyan 值 。 详 细 代码 如 下 : 


人 swchange: function (e) { 

总 if (e.detail.value) { 

3 this.data.swInfo = ' 关 灯 ' 
4 this.data.bcolor = "cornsilk" 
5 } else { 

6 this.data.swInfo = ' 开 灯 ' 
六 this.data.bcolor = "cyan" 
8 } 

9 this.setDatal({ 

10 swInfo: this.data.swInfo, 
了 bcolor: this.data.bcolor 
12 }) 

13 ne 


(7) 游戏 难 易 度 选 择 事件 。 

游戏 难 易 度 选择 事件 的 功能 是 根据 radio-group 的 bindchange 属性 绑 定 的 事件 rgeasy( ) 判 
断 选择 的 是 “ 易 ”radio 还 是 “ 难 ”radio， 如 果 是 “ 易 ”radio， 则 将 游戏 时 间 设 置 为 0， 否 
则 设置 为 20。 其 详细 代码 如 下 : 


1 rgeasy: function (e) { 

有 BEdetail valuo == "Dy { 
加 this.data.time = 10 

4 } else { 

5 this.data.time = 20 

6 } 

4 this .setData({ 

8 time: this.data.time 

9 }) 

10 ys 


本 案例 的 详细 代码 ， 读 者 可 以 参阅 代码 包 lesson4 pork 文件 夹 中 的 内 容 。 
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0 4.4 “信息 登记 界面 的 设计 与 实现 。 


第 3 章 介 绍 了 移动 端 小 程序 登录 界面 的 设计 与 实现 ， 其 实 大 多 数 小 程序 在 用 户 登录 成 功 
后 还 需要 完善 一 些 个 人 信息 ， 才 能 完全 使 用 所 有 功能 。 比 如 开发 一 个 购物 小 程序 ， 通 常 需 要 
用 户 登 录 , 完成 性 别 、 爱 好 、 联 系 电话 、 通信 地 址 、 出 生年 月 等 信息 操作 ,操作 界面 如 图 4.16 
所 示 。 从 图 4.16 所 示 的 信息 登记 界面 分 析 , 除了 使 用 前 面 介绍 的 flex 布局 ,button 组 件 和 input 
组 件 外 ， 还 需要 使 用 label (标签 组 件 )、checkbox-group/checkbox 〈 复 选 框 组 / 复 选 组 件 )、 
picker/picker-view〔 深 动 选择 器 组 件 ) 等 form 表单) 类 组 件 。 


用 户 姓名 请 输入 姓名 

用 户 性 别 男 

出 生日 期 2019-01-22 
联系 电话 请 输入 联系 电话 


通讯 地 址 江苏 省 , 泰州 市 ， 海 陵 区 


请 输入 详细 地 址 


你 的 爱好 全 选 


图 4.16 信息 登记 界面 


4.4.1 ”预备 知识 
label 


码 运 行 后 ， 用 户 单 击 “ 点 我 ”label 组 件 后 ， 会 默认 执行 “确定 1”button 组 件 部 
绑 定 的 bl() 事 件 。 


4.4.1.1 


1 ”<label> 点 我 

训 <button id="btl" bindtap='bl'> 确 定 1</button> 
六 <button id="bt2" bindtap='b2'> 确 定 2</button> 
4 </label> 


上 述 代码 在 单 击 label 组 件 后 , 会 默认 触发 该 组 件 中 嵌入 的 第 一 个 组 件 绑 定 的 事件 。 如 果 
单 击 label 组 件 后 ， 要 执行 嵌入 组 件 中 指定 的 组 件 ， 就 需要 使 用 label 组 件 的 for 属性 。 例 如 
上 述 代码 要 实现 单 击 “ 点 我 ”label 组 件 后 执行 “确定 2”button 组 件 绑 定 的 b2( ) 事 件 ， 可 以 
将 上 述 代码 的 第 1 行 修改 为 如 下 代码 : 


ee be 
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2 <button id="btl" bindtap='bl'> 确 定 1</button> 
3 <button id="bt2" bindtap='b2'> 确 定 2</button> 
4 </label> 


目前 ，label 组 件 可 以 绑 定 button 组 件 、checkbox 组 件 、radio 组 件 和 switch 组 件 。 

checkbox 

checkbox〔 复 选 组 件 ) 可 以 实现 多 个 选项 同时 选中 的 功能 。 在 微 信 小 程序 开发 中 ， 该 组 
件 通 常 被 放 到 checkbox-group 组 件 中 ， 并 在 checkbox-group 中 通过 bindchange 属性 绑 定 监听 
事件 。checkbox 的 常用 属性 及 功能 说 明 如 表 4-10 所 示 。 当 checkbox-group 中 选中 项 发 生 改 变 
时 , 会 触发 bindchange 属性 绑 定 的 事件 ,用 e.detail.value 语句 可 以 返回 选中 项 的 value 值 ( 数 
组 )。 例 如 ， 下 面 的 代码 运行 后 ， 能 够 在 调试 器 窗口 依次 输出 选中 项 的 value 值 。 


表 4-10 checkbox 组件 的 属性 及 功能 说 明 


属性 功 能 
value 当 checkbox 选中 时 ，check-group 的 chang 事件 会 携带 checkbox 的 value 值 
checked 当前 是 否 选中 ， 默 认 值 为 false (不 选中 ) 
disabled 当前 是 否 禁用 ， 默 认 值 为 false (不 禁用 ) 
color 选中 框 内 选中 符号 的 颜色 


Q@ 页 面 结构 文件 代码 。 


<checkbox-group bindchange="selectCountry"> 
<checkbox value='China' checked> 中 国 </checkbox> 
<checkbox value='USA' color='red'> 美 国 </checkbox> 
<checkbox value='Russian'> 俄 罗斯 </checkbox> 
</checkbox-group> 


上 述 代码 第 1 行使 用 bindchange 属性 绑 定 当 复 选 组 件 选 中 项 发 生变 化 时 就 会 触发 的 
selectCountry( ) 方 法 。 第 2 行 的 checked 属性 表示 默认 该 复 选项 选中 第 3 行 的 color 属性 表 
示 该 复 选项 中 选中 框 内 选中 符号 的 颜色 为 红色 ; 第 2~4 行使 用 value 属性 绑 定 了 每 个 复 选项 
选中 时 的 返回 值 。 显 示 效 果 如 图 4.17 所 示 。 


e000 WeChats 1139 


wm 必 wm 


微 信 


请 选择 你 喜爱 的 国家 
Y 中 国 v 美国 ”俄罗斯 


显示 效果 


Console Sources Network Security 。 AppD 


: Array(9) 


输出 效果 


图 4.17 checkbox 组 件 
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@ 页 面 逻 辑 文件 代码 。 


selectCountry:function (e) { 
var c= e.detail.value ; 
console.1log (c) 
for (var i = 0;i<c.length; i++) 
console.1log (c[i]) 
}, 


picker 

picker( 选 择 器 组 件 ) 是 从 底部 弹 起 的 滚动 选择 器 , 目前 支持 普通 选择 器 、 
多 列 选择 器 、 时 间 选 择 器 、 日 期 选择 器 和 省 市 区 选择 器 等 5 种 ， 默 认 是 普通 选 1 二 
择 器 。 可 以 使 用 mode 属性 设 定 选择 器 的 类 型 ，mode 的 属性 值 及 选择 器 类 型 如 
表 4-11 所 示 。 


ae 必 wN 


表 4-11 picker 组 件 的 mode 属性 值 及 功能 说 明 


selector 


multiSelector 


region 省 市 区 选择 器 


图 4.18 普通 选择 器 (1) 图 4.19 普通 选择 器 (2) 
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取消 确定 


日 化 用 品 
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4.24 ”省 市 区 选择 器 


(1) 普通 选择 器 。 
普通 选择 器 的 属性 及 功能 说 明 如 表 4-12 所 示 。 


表 4-12 普通 选择 器 的 属性 及 功能 说 阴 


属性 类 型 功 能 
range Array/Object Aray “| 用 于 设 定 普通 选择 器 上 绑 定 的 数组 ， 默 认为 空 数 组 
ee sting 当 range 是 一 个 Object Array 时 ， 通 过 range-key 指定 Object 中 key 
的 值 作为 选择 器 显示 内 容 
value Number value 的 值 表示 选择 了 range 中 的 第 几 个 元 素 (下 标 从 0 开始 ) 
bindchange | EventHandle value 改变 时 触发 change 事件 ，event detail={value:value} 
disabled Boolean 当前 是 否 禁用 ， 默 认 值 为 false 〈 不 禁用 ) 
bindcancel | EventHandle 取消 选择 或 收 起 选择 器 时 触发 


普通 选择 器 绑 定 的 数据 有 两 种 形式 ， 下 面 以 绑 定 Array 型 数据 来 实现 图 4.18 所 示 功 能 。 
即 当 用 户 单 击 图 4.18 界面 上 的 “ 单 击 选择 颜色 ”， 用 户 界面 底部 显示 “红色 、 橙 色 、 黄 色 、 
绿色 、 青 色 、 蓝 色 、 紫 色 ” 这 7 种 颜色 的 选择 器 ， 当 选中 某 个 颜色 时 ， 选 中 的 颜色 将 显示 在 
用 户 界 面 上 。 

Q 页 面 结构 文件 代码 。 


1 <view class='line'> 
2 <view> 选 择 颜 色 </view> 


3 <picker mode='selector' value="{{ idColor }}" bindchange='pickColor" 
range="'{{1likeColor}}'> 

4 <input class="m-inputPart" placeholder=' 单 击 选择 颜色 ' value= 
"{{1ikeColor[idColor]}}"></input> 

人 </picker> 


6 </view> 
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上 述 代码 第 3 行 用 mode 属性 设 定 选择 器 的 类 型 为 普通 选择 器 (selector)， 对 于 普通 选择 
器 可 以 不 设置 用 bindchange 属性 绑 定 pickColor( ) 函 数 ， 实 现 选择 器 内 容 发 生 改变 时 返回 选 
择 器 上 选中 颜色 对 应 的 idColor 值 ; 用 range 属性 绑 定 选 择 器 上 要 显示 的 数组 likeColor; 第 4 
行 代 码 用 value 属性 绑 定 要 在 input 组 件 上 显示 的 内 容 ， 即 颜色 数组 likeColor 下 标 为 idColor 
的 元 素 。 

@ 页 面 样式 文件 代码 。 


.line{ 
padding: 15px; 
} 
-Im-inputPart { 
padding: 5px; 
border-width: 2px; 
border: lpx solid yellowgreen; 
} 


@ 页 面 逻辑 文件 代码 。 


DaouwwnP 


1 Page ({ 
2 data: { 
3 1ikecolor: [" 红 色 "，" 栖 色 "，" 黄 色 "，" 绿 色 "，" 青 色 "，" 蓝 色 "，" 紫 色 "] ， 
4 COLOP> 
5 }, 
6 pickColor: function(e) { 
y this.setData({ 
8 idColor: e.detail.value 
9 }) 
10 } 
| 

下 面 以 绑 定 Array Object 型 数据 实现 图 4.19 所 示 功 能 。 即 当 用 户 单 击 图 4.19 界面 上 的 “ 单 
击 选 择 国家 ”在 用 户 界面 底部 显示 “美国 、 中 国 、 巴 西 、 日 本 ”4 个 国家 的 选择 器 ， 当 选中 
某 个 国家 时 ， 选 中 的 国家 将 显示 在 用 户 界面 上 。 

Q 页 面 结构 文件 代码 。 


1 <view class='line'> 


2 <view> 选 择 国 家 </view> 

及 <picker mode='selector' range-key='name' value="{{idCountry}}" bindchange= 
'pickCountry' range='{{objectArray}}'> 

4 <input class="m-inputPart" placeholder=' 单 击 选择 国家 ' value= 
"{{objectArray[idCountry] .name}}"></input> 

所 </picker> 


6 </view> 


上 述 代 码 第 3 行 用 range-key 属性 设 定 选择 器 要 显示 内 容 对 应 的 key; 第 4 行 代码 用 value 
属性 绑 定 objectArray 对 象 中 idCountry 下 标 元 素 的 name 键 对 应 的 值 , 即 国家 名 。 该 页 面 结构 
文件 对 应 的 页 面 样式 文件 与 图 4.18 示例 代码 一 样 。 

@ 页 面 逻辑 文件 代码 。 


5 Page ({ 
2 data: { 
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二 维 对 象 ， 用 于 设 定 多 列 选择 器 上 绑 定 的 数组 ， 默 认为 空 数 组 

当 range 是 一 个 Object Array 时 ， 通 过 range-key 来 指定 Object 
中 key 的 值 作为 选择 器 显示 内 容 
value 的 值 表 示 选 择 了 range 中 的 第 几 个 元 素 (下 标 从 0 开始 ) 


3 objectArray: [ 
4 { > 0 name: ' 美 国 ' 
5 { Te name: ' 中 国 ' 
6 { le 2 name: "巴西 
7 { Ef Cs name: ' 日 本 ' 
8 ]， 
9 dCountry se, 
10 }, 
下 pickCountry: function (e) { 
2 console.1og(e.detail) 
13 this.setDatal({ 
14 idCountry: e.detail.value 
15 }) 
16 J 
1 | 
(2) 多 列 选择 器 。 
多 列 选择 器 的 属性 及 功能 说 明 如 表 4-13 所 示 。 
表 4-13 多 列 选择 器 的 属性 及 功能 说 明 
属性 类 型 

range Array/Object Array 

range-key String 

value Number 

bindchange EventHandle 


bindcolumnchange | EventHandle 


disabled 


bindcancel 


Boolean 
EventHandle 


value 改变 时 触发 change 事件 ，event.detail={value:value} 

某 一 列 的 值 改变 时 触发 columnchange 事件 ，event.detail= 
{column:column,value:value}, column 的 值 表示 改变 了 第 几 列 ( 下 
标 从 0 开始 )，value 的 值 表示 变更 值 的 下 标 
当前 是 否 禁用 ， 默 认 值 为 false (不 禁用 》 
取消 选择 或 收 起 选择 器 时 触发 


多 列 选择 器 绑 定 的 数据 有 两 种 情况 : 一 种 是 每 一 列 数据 都 是 固定 的 ， 另 一 种 是 列 数据 是 
不 固定 的 。 


下 面 用 选择 器 绑 定 每 一 列 都 是 固定 的 数据 来 实现 图 4.20 所 示 功 能 。 即 当 用 户 单 击 图 4.20 


界面 上 的 “ 单 击 选 择 爱 好 ”， 在 用 户 界面 底部 弹出 “电影 、 电 视 剧 ”和 “爱情 片 、 冒 险 片 、 动 
画 片 、 喜 剧 片 ”两 列 数据 供用 户 选 择 ， 选 中 每 列 数据 后 ， 选 中 内 容 将 显示 在 用 户 界面 上 。 


下 
3 
4 
P< 
5 
6 


中 页 面 


<view. 


/input> 
</pic. 


结构 文件 代码 。 


<view class='line'> 


> 选择 爱好 </view> 


ker> 


</view> 


<picker mode='multiSelector' bindchange="'pickLike' range= '{{multiLikes}}'> 
<input class="m-inputPart" placeholder=' 单 击 选择 爱好 ' value= "{{likes}}"> 


上 述 代码 第 3 行 用 mode 属性 设 定 选择 器 为 多 列 选择 器 ; 第 4 行 代码 用 value 属性 绑 定 页 


鲁 风 辑 文件 


处 理 的 likes 值 。 该 页 面 结构 文件 对 应 的 页 面 样式 文件 与 图 4.18 示例 代码 一 样 。 
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@ 页 面 逻辑 文件 代码 。 


下 Page ({ 

2 data: { 

multiLikes: [[' 电 影 ，，' 电视 剧 '] ，[' 爱 情 片 '，' 冒险 片 '，' 动 画 片 '，' 喜 剧 片 ']]， 
4 Le 

5 jy， 

6 PickLike:function(e) { 

名 console.1og('" 携 带 值 为 '，e.detail.value) 

8 var likel = this.data.multiLikes[0] [e.detail.value[0]] 
9 Var like2 = this.data.multiLikes[1] [e.detail.value[1]] 
10 this.setDatal({ 

11 likes: likel + ", " + like2 

12 }) 

ES | 

Ls 


上 述 代 码 第 3 行 定义 了 多 列 选择 器 上 要 绑 定 的 二 维 数组 multiLikes， 该 数组 中 包含 的 一 
维 数组 个 数 即 为 多 列 选择 器 上 要 显示 数据 的 列 数 ， 其 格式 通常 为 “[[ 一 维 数组 1],[ 一 维 数 组 
2],…,[ 一 维 数组 n]] ”， 每 个 一 维 数组 包含 的 元 素 个 数 即 为 多 列 选 择 器 上 对 应 列 显示 的 数据 的 
行 数 。 图 4.20 中 多 列 选择 器 上 第 1 列 显示 “电影 ”电视 剧 ” 2 行 ， 第 2 列 显 示 “ 爱 情 片 ”““ 周 
险 片 ”“ 动 画 片 ”“ 喜 剧 片 ”" 4 行 。 第 7 行 代码 的 e.detail.value 返回 一 个 一 维 数组 ， 该 一 维 数 
组 元 素 由 多 列 选择 器 上 每 一 列 所 选中 的 元 素 在 multiLikes 数组 中 对 应 的 一 维 数组 中 的 下 标 值 
组 成 。 例 如 ， 如 果 用 户 在 图 4.20 的 第 一 列 选中 “电视 剧 ” 第 二 列 选中 “动画 片 ” 则 该 行 输 
出 “携带 值 为 : [1.2]”， 即 e.detail.value[0] 的 值 为 1，e.detailvalue[1] 的 值 为 2。 第 8~9 行 代码 
的 multiLikes[0] [e.detail.value[0]] 表 示 取 multiLikes 数组 的 第 一 个 一 维 数组 选中 的 元 素 
multiLikes[1] [e.detail.value[1]] 表 示 取 multiLikes 数组 的 第 二 个 一 维 数组 选中 的 元 素 。 

下 面 用 选择 器 绑 定 列 是 不 固定 的 数据 来 实现 图 4.21 所 示 功 能 。 即 当 用 户 单 击 图 4.21 界 
面 上 的 “ 单 击 选择 商品 ”， 用 户 界面 底部 选择 器 的 第 一 列 弹出 “日 用 品 ”“ 衣 服 ”“ 电 器 ” 第 
二 列 弹出 的 内 容 根据 第 一 列 选择 选项 的 改变 而 改变 ， 即 “日 用 品 ” 列 对 应 “卫浴 用 具 ”“ 日 杂 
用 品 ”*“ 日 化 用 品 ”“ 日 用 小 五 金 ”，“ 衣 服 ” 列 对 应 “上 衣 ”“ 裤 子 ”“ 鞋 子 ”,，“ 电 器 ” 列 对 应 
“制冷 电器 ”“ 空 调 器 ”“ 厨 房 电 器 ”“ 电 暧 器 具 ”， 第 三 列 弹 出 的 内 容 根据 第 一 列 、 第 二 列 选择 
选项 的 改变 而 改变 ， 即 “日 用 品 ” 中 的 “日 化 用 器 ”对 应 “洗面 奶 “牙膏 ”， 用 户 选 中 每 列 
的 数据 后 ， 选 中 内 容 将 显示 在 用 户 界面 上 。 

Q 页 面 结构 文件 代码 。 


1 <view class='line'> 


多 <view> 选 择 商 品 </view> 

3 <picker mode='multiselector' bindchange='pickShop' bindcolumnchange= 
"bindPickshopColumnChange" range="'{{multishops}}'> 

4 <input class="m-inputPart" placeholder=' 单 击 选择 商品 ' value="{ {shops}}"> 
</input> 

5 </picker> 


6 </view> 

上 述 代 码 第 3 行 定义 了 多 列 选择 器 上 要 绑 定 的 二 维 数组 multiShops， 该 数组 中 包含 的 一 
维 数组 个 数 即 为 多 列 选 择 器 上 要 显示 的 数据 的 列 数 ，bindcolumnchange 属性 绑 定 了 
bindPickShopColumnChange( ) 方 法 ， 用 于 实现 某 列 选项 变化 时 要 执行 的 功能 。 该 页 面 结构 文 


迁 D 第 4 章 基本 组 件 目 了 了 


件 对 应 的 页 面 样式 文件 与 图 4.18 示例 代码 一 样 。 
@ 页 面 逻辑 文件 代码 。 


Page ({ 
data 


}, 


multishops: [ 
[ "日 用 品 '， "衣服 "，“ 电 器 '] ， 
[ "卫浴 用 具 "，“ 日 杂 用 品 "，“ 日 化 用 品 "，“ 日 用 小 五 金 '] ， 
[ "肥皂 '，“' 毛 巾 "] 

]， 

外 DOPER Hr 

shopsIndex: [0, 0, 0], 


pickshop: function (e) { 


]， 


Var shopl = this.data.multishops[0] [e.detail.value[0]] 
Var shop2 = this.data.multishops[1] [e.detail.value[1]] 
Var shop3 = this.data.multishops[2] [e.detail.value[2]] 
this .setData({ 

Shops: SOPIE 4 "> Shop2 ty TH Shop3 
}) 


bindPickshopColumnChange: function (e) { 


this.data.shopsIndex[e.detail.column] = e.detail.value 
switch (e.detail.column) { 
case 0: // 第 一 列 变动 
switch (this.data.shopsIndex[0]) { // 第 一 列 选择 项 变动 

case 0: // 第 一 列 第 一 行 
// 第 二 列 显示 内 容 
this.data.multishops[1]=[' 卫 浴 用 具 ', ' 日 杂 用 品 ",' 日 化 用 品 ', ' 日 用 小 五 金 '] 
// 第 三 列 显示 内 容 
this.data.multishops[2] 
break 

case 1: // 第 一 列 第 二 行 
// 第 二 列 显 示 内 容 
this.data.multishops[1] 
// 第 三 列 显示 内 容 
this.data.multishops[2] 
break 

case 2: // 第 一 列 第 三 行 
// 第 二 列 显 示 内 容 
this.data.multishops[1] = [" 制 冷 电器 '，' 空 调 器 '，' 厨房 电器 '，' 电 暖 器 具 '] 

//… 第 三 列 显示 内 容 类 似 


break 


[" 肥 皂 "，' 毛 巾 '] 


[上 衣 '， "裤子 "， "鞋子 '] 


[冬装 "， "夏装 "] 


} 
break 
case 1: // 第 二 列 变动 
switch (this.data.shopsIndex[0]) { // 第 一 列 选择 项 变动 
case 0: // 第 一 列 第 一 行 
switch (this.data.shopsIndex[1]) { // 第 二 列 选项 变动 
case 0: // 第 二 列 第 一 行 

// 第 三 列 显示 内 容 
this.data.multishops[2] = [' 肥 皂 "，' 毛 巾 '] 
break 
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51 case 1: // 第 二 列 第 二 行 

52 // 第 三 列 显示 内 容 

53 this .data.multiShops[2] = [" 菜 刀 "， "砧板 '， ' 淘 米 篮 '， ' 洗 菜 贫 '] 
54 break 

与 六 case 2: // 第 二 列 第 三 行 

56 // 第 三 列 显示 内 容 

57 this.data.multishops[2] = [" 洗 面 奶 '， 牙膏 '] 
58 break 

59 case 3: // 第 二 列 第 四 行 

60 // 第 三 列 显示 内 容 

61 this.data.multishops[2] = [" 螺 丝 刀 '， "胶布 '] 
62 break 

63 } 

64 break 

65 case 1: // 第 一 列 第 二 行 

66 switch (this.data.shopsIndex[1]) { // 第 二 列 选项 变动 
67 Case 0: 

68 // 第 三 列 显示 内 容 

69 this .data.multiShops[2] = [' 冬 装 '，' 夏 装 '] 
70 break 

3 case 1: 

72 this.data.multishops[2] = [' 棉 裤 '，' 单 裤 '] 
73 break 

74 Case 2: 

75 this.data.multishops[2] = [' 凉 鞋 '，' 皮 鞋 '，' 布 鞋 '] 
76 break 

| } 

78 break 

79 //… 第 一 列 第 三 行 代码 类 似 

80 } 

81 } 

82 this.setDatal({ 

83 multiShops: this.data.multiShops， 

84 shopsIndex: this.data.shopsIndex 

85 }) 

86 ]}， 


上 述 代码 第 3~9 行 分 别 定义 了 多 列 选 择 器 要 绑 定 的 数组 multiShops、input 组 件 中 要 显示 
的 内 容 shops 和 保存 每 一 列 选中 选项 的 下 标 shopsIndex 数组 (默认 第 一 列 选 中 下 标 为 0 的 元 
素 、 第 二 列 选中 下 标 为 0 的 元 素 、 第 三 列 选 中 下 标 为 0 的 元 素 ， 即 该 数组 值 为 [0,0,0])。 第 20 
行 代码 的 e.detail.column 返回 当前 变动 列 的 下 标 ,e.detailLvalue 表示 该 列 变更 后 选中 项 的 下 标 。 
第 22~42 行 代 码 表 示 当 多 列 选择 器 中 的 第 一 列 变动 时 ， 如 果 当 前 选中 第 一 列 的 第 一 行 ， 则 设 
置 要 在 第 二 列 、 第 三 列 显示 的 内 容 ， 如 果 当 前 选中 第 一 列 的 第 二 行 ， 则 设置 要 在 第 二 列 、 第 
三 列 显示 的 内 容 ， 以 此 类 推 。 第 43~80 行 代码 表示 当 多 列 选择 器 中 的 第 2 列 变动 时 ， 如 果 当 
前 选中 第 一 列 的 第 一 行 ， 则 设置 要 在 第 三 列 显示 的 内 容 ; 如 果 当 前 选中 第 一 列 的 第 二 行 ， 则 
设置 要 在 第 三 列 显 示 的 内 容 ， 以 此 类 推 。 
(3) 时 间 选 择 器 。 
寺 间 选择 器 的 属性 及 功能 说 明 如 表 4-14 所 示 。 
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表 4-14 ”时 间 选 择 器 的 属性 及 功能 说 明 


属性 类 型 功 能 
start String 表示 开始 时 间 ， 格 式 为 “hh:mm” 
end String 表示 结束 时 间 ， 格 式 为 “hh:mm” 
value String 表示 选中 的 时 间 ， 格 式 为 “hh:mm” 
bindchange EventHandle value 改变 时 触发 change 事件 ，event.detail= {value:value} 
disabled Boolean 当前 是 否 禁用 ， 默 认 值 为 false (不 禁用 ) 
bindcancel EventHandle 取消 选择 或 收 起 选择 器 时 触发 


时 间 选 择 器 的 start 和 end 属性 用 于 指定 时 间 选 择 器 选中 时 间 的 范围 , 可 以 使 用 如 下 代码 
实现 图 4.22 所 示 界 面 。 
Q@ 页 面 结构 文件 代码 。 


1 <view class='line'> 

2 <view> 选 择 时 间 </view> 

3 <picker mode='time' start="09:00" end="21:30" bindchange='pickTime'> 

4 <input class="m-inputPart" placeholder=' 单 击 选择 时 间 ' value="{ {times}}"> 
</input> 

3 </picker> 

6 </view> 


上 述 代 码 第 3 行 用 start 属性 和 end 属性 分 别 定义 了 时 间 选 择 器 选择 的 时 间 范 围 。 该 页 面 
结构 文件 对 应 的 页 面 样式 文件 与 图 4.18 示例 代码 一 样 。 

@ 页 面 罗 辑 文件 代码 。 

Page ({ 

data: { 


吧 

光 

3 times:"", 

上 . }, 

. pickTime:function(e){ 

6 this.setData({ 

六 times:e.detail.value 
8 

9 


(4) 日 期 选择 器 。 
期 选择 器 的 属性 及 功能 说 明 如 表 4-15 所 示 。 


表 4-15 日 期 选择 器 的 属性 及 功能 说 明 


属性 类 型 功 能 

start String 表示 开始 日 期 ， 格 式 为 “YYYY-MM-DD” 

end String 表示 结束 日 期 ， 格 式 为 “YYYYMM-DD” 

value String 表示 选中 的 日 期 ， 格 式 为 “YYYYMM-DD”， 默 认为 0 
fields String 有 效 值 year (年 )，month (月 )，day (天 )， 默 认为 day 
bindchange EventHandle | value 改变 时 触发 change 事件 ，event.detail={value:value} 
disabled Boolean 当前 是 否 禁用 ， 默 认 值 为 false〈 不 禁用 ) 

bindcancel EventHandle | 取消 选择 或 收 起 选择 器 时 触发 
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日 期 选择 器 的 start 和 end 属性 用 于 指定 日 期 选择 器 选中 日 期 的 范围 ,可 以 使 用 如 下 代码 
实现 图 4.23 所 示 界 面 。 
名 页 面 结构 文件 代码 。 


1 <view class='line'> 

<view> 选 择 日 期 </view> 

如 <picker mode='date' start="2015-01-01" end="2020-12-31" bindchange="'pickDate'> 
4 <input class="m-inputPart" placeholder=' 单 击 选 择 日 期 ' value="{{dates}}"> 
</input> 

5 </picker> 

6 </view> 


上 述 代码 第 3 行 start 属性 和 end 属性 分 别 定义 了 日 期 选择 器 选择 的 日 期 范围 。 该 页 面 结 
构 文件 对 应 的 页 面 样式 文件 与 图 4.18 示例 代码 一 样 。 
@ 页 面 逻辑 文件 代码 。 


下 Page ({ 

4 data: { 

3 Es 

}, 

. pickDate: function (e) { 
6 this.setDatal({ 

7 dates: e.detail.value 
8 

1 


(5) 省 市 区 选择 器 。 
省 市 区 选择 器 的 属性 及 功能 说 明 如 表 4-16 所 示 。 
表 4-16 省 市 区 选择 器 的 属性 及 功能 说 明 
功 能 
可 为 每 一 列 的 项 部 添加 一 个 自 定义 的 项 
表示 选中 的 省 市 区 ， 默 认 选 中 每 一 列 的 第 一 个 值 
value 改变 时 触发 change 事件 ，event.detail={value:value}event.detail = 
{value: value, code: code, postcode: postcode}， 其 中 字段 code 是 统计 用 区 
划 代 码 ，postcode 是 邮政 编码 


属性 类 型 
custom-item String 


value Array 


bindchange EventHandle 


disabled Boolean 当前 是 否 禁用 ， 默 认 值 为 false (不 禁用 ) 
bindcancel EventHandle | 取消 选择 或 收 起 选择 器 时 触发 


省 市 区 选择 器 的 value 属性 值 改变 时 , 使 用 e.detail.value 可 以 返回 地 区 , 使 用 e.detail.code 

可 以 返回 地 区 码 ， 使 用 e.detail.postcode 可 以 返回 邮政 编码 。 可 以 使 用 如 下 代码 实现 图 4.24 

所 示 界 面 。 
Q 页 面 结构 文件 代码 。 
<view class='line'> 

<view> 选 择 地 址 </view> 


<picker mode='region' bindchange="'pickRegion'> 
<input class="m-inputPart"”Placeholder=' 单 击 选择 邮 址 ' value="{ {regions}}"></input> 
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5 <input class="m-inputPart" placeholder=' 邮 政 编码 ' value="{ {posts}]"></input> 
6 </picker> 
2 </view> 


上 述 代码 第 3 行 用 mode 属性 设 定 选 择 器 为 省 市 区 选择 器 。 该 页 面 结构 文件 对 应 的 页 面 
样式 文件 与 图 4.18 示例 代码 一 样 。 
@ 页 面 逻 辑 文件 代码 。 


1 Page ({ 

区 data: { 

有 Regiong 

4 posES “"y 

5 }, 

6 pickRegion: function (e) { 

7 console.1og (e.detail.code) 

8 this.setData ({ 

9 regions: e.detail.value，// 地 区 
10 posts: e.detail.postcode // 邮 政 编码 
11 ]) 

正己 } 

bl 


4.4.2 ”信息 登记 界面 的 实现 


主 界面 的 设计 

根据 图 4.16 的 显示 效果 ,用 input 组 件 作为 用 户 姓名 、 联 系 电话 和 详细 地 
址 的 输入 框 ， 分 别 用 普通 选择 器 、 日 期 选择 器 作为 用 户 性 别 输入 和 出 生日 期 输 
入 的 选择 器 ，checkbox 组 件 作为 爱好 选择 复 选 框 ， 使 用 button 组 件 实现 保存 、 重 置 按钮 ， 使 
用 form 组 件 实现 完善 用 户 信息 的 表单 。 

Q@ 页 面 结构 文件 代码 。 


1 <!--index.wxml-—-> 

2 <form bindsubmit="formSubmit" bindreset="formReset"> 

3 <view class='detail'> 

4 <label class='line'> 

S 用 户 姓名 : 

6 <input name='userName' style='padding-left:55rpx;' placeholder=' 请 输入 
姓名 ' value=''></input> 

六 </label> 

8 <label class='line' for='psex'> 

9 用 户 性 别 : 

10 <picker name='userSex' style="'width:50%' id='psex' bindchange= 
"bindsexChange" value="{{array[sexindex]}}" range="{{array}}"> 

nn <view style='padding-left:55rpx;'>{{array[sexindex] }}</view> 

12 </picker> 

13 </label> 

14 <label class='line'> 

i 出 生日 期 : 

16 <picker name='birthDay' mode='date' start="2015-01-01" end="2020-12-31" 


value="{{birthDay}}" bindchange="'pickDateChange'> 
<view style="'padding-left:55rpx;'>{{birthDay}}</view> 
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18 </picker> 

19 </label> 

20 <label class='line'> 

21 联系 电话 : 

22 <input name='userTel' style='"'padding-left:55rpx;' placeholder=' 请 输入 

联系 电话 ' value=' "></input> 

23 </label> 

24 <label class='line'> 

25 通讯 地 址 : 

26 <picker name='userRddress' mode='region' bindchange='pickRegionChange"' 

value='{{regions}}'> 

名 <view style='padding-left:55rpx;'>{{regions}}</view> 

28 </picker> 

29 </label> 

30 <label class='line'> 

31 <input style='padding-left:55rpx;' placeholder=' 请 输入 联系 详细 地 址 ' 
value=''></input> 

32 </label> 

33 <label class='line'> 你 的 爱好 : 

34 <checkbox-group style='padding-left:55rpx;' bindchange="likesChange"> 

35 <checkbox value="{{selects.value}}" checked="{{selects.checked}}" /> 
{{selects.value}} 

36 </checkbox-group> 

37 </label> 

38 <label class='like'> 

39 <checkbox-group style='padding-left:55rpx;' bindchange="likeChange"> 

40 <label wx:for="{{likeItems}}"> 

41 <checkbox value="{{item.name}}" checked="{{item.checked}}" /> 
{{item.value}} 

42 </label> 

43 </checkbox-group> 

44 </label> 

45 <view class="btn-area"> 

46 <button form-type="submit"> 保 存 </button> 

47 <button form-type="reset"> 重 置 </button> 

48 </view> 


49 </view> 
50 </form> 


上 述 代 码 第 2 行 用 bindsubmit 属性 绑 定 表单 提交 事件 ， 用 bindreset 属性 绑 定 表单 重 置 事 
件 ; 第 4-7 行 用 input 组件 实现 用 户 姓名 的 输入 ; 第 8~13 行 用 picker 组 件 实现 性 别 的 普通 选 
择 器 ， 第 14~19 行 用 picker 组 件 实现 出 生日 期 的 日 期 选择 器 ;第 20~23 行 用 input 组 件 实现 
联系 电话 的 输入 ; 第 24~29 行 用 pick 组 件 实现 通讯 地 址 省 市 区 的 选择 ， 第 30~32 行 用 input 
组 件 实 现 详细 地 址 的 输入 ; 第 33~37 行 用 checkbox 组 件 实现 爱好 的 全 选 功 能 ; 第 38~44 行 用 
checkbox 组 件 实现 爱好 的 复 选 功能 ;第 45~48 行 用 button 组 件 实现 表单 的 提交 和 重 置 。 另 外 
给 每 个 需要 返回 数据 的 组 件 都 定义 了 name 属性 ,用 于 提交 表单 时 使 用 e.detail.value 返回 表单 
中 填 入 的 数据 。 

@ 页 面 样式 文件 代码 。 


引 /**index.wxss**/ 
2 page { 
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3 width: 100%; 

4 height: 100%; 
5 : 

6 .detail { 

J height: 100%; 
8 display: flex; 


EE flex-direction: column; 
10 background: #0ble7e2a; 
EL 

12 .line { 

E3 display: flex; 

14 flex-direction: row; 
he height:100rpx; 

16 align-items: center; 


17 padding-left: 20rpx; 
18 border-width: 2px; 


19 border-bottom: lpx solid whitesmoke; 
pA 

21 .like{ 

2 display: flex; 

23 flex-direction: row; 

24 height:150rpx; 

25 align-items: center; 


26 padding-left: 20rpx; 
2 border-width: 2px; 


28 border-bottom: lpx solid whitesmoke; 
29: 

30 .btn-area { 

3 padding: Spx; 

信之 display: flex; 

33 flex-direction: row; 
34 } 

35 button { 

36 font-size: 15px; 

39 background: #000fff; 
38 color: white; 

39 width: 30%; 

40 height: 40px; 

41 } 


上 述 代码 的 第 6~11 行 用 于 控制 整个 界面 布局 样式 ， 第 12~20 行 用 于 控制 组 件 水 平方 向 
摆布 ， 并 指定 下 边框 线 ; 第 21~28 行 用 于 控制 爱好 所 在 行 的 样式 ， 第 30~34 行 用 于 控制 两 个 
button 的 摆布 样式 ;第 35~41 行 用 于 控制 button 组 件 的 显示 样式 。 | 

功能 实现 

本 小 程序 实现 的 主要 功能 包括 3 个 : 用 input 组 件 输入 数据 ， 用 picker 组 上 民 
件 实现 性 别 、 出 生日 期 和 省 市 区 的 选择 ， 用 checkbox 组 件 实现 爱好 的 复 选 。 
中 input 组 件 获取 数据 在 4.2 节 已 经 介绍 过 ， 人 性别、 出 生日 期 和 省 市 区 的 选 
择 与 本 节 的 预备 知识 类 似 。 本 案例 的 详细 代码 可 以 参阅 代码 包 lesson4_register 文件 夹 中 的 内 
容 。 下 面 列 出 页 面 逻辑 文件 中 的 其 他 主要 功能 代码 。 

(1) 定义 并 初始 化 数据 。 

代码 如 下 。 


4.4.2.2 
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下 data: { 
2 drays [i // 性 别 选 择 器 上 显示 的 数据 
3 sexindex: 0, // 性 别 选 择 器 返回 的 选中 数据 下 标 
4 birthDay: '2019-09-09', // 出 生日 期 
5 regions: [" 江 苏 省 "， "泰州 市 '，“' 海 陵 区 "] , // 默 认 市 区 
6 selects: { name: 'all'，value: ' 全 选 '，checked: false },// 用 于 定义 全 选 复 选 
// 框 绑 定 的 数据 
人 likeItems: [{ name: 'shop', value: ' 购 物 '，checked: false | 
8 { name: 'sport'，value: ' 运 动 '，checked: false }， 
9 { name: 'tour'，value: ' 旅 游 '，checked: false }， 
10 { name: 'read'，value: ' 阅 读 '，checked: false }， 
EE { name: 'film'，value: ' 摄 影 '，checked: false }],// 用 于 定义 爱好 复 选 框 绑 定 的 
// 数 据 
2 Fy 
(2) 页 面 加 载 事 件 。 
代码 如 下 。 
让 onLoad: function (option) { 
2 Var now = new Date( ); 
3 Var year = now.getFullYear( ); 
4 var month = now.getMonth( ) + 1; 
号 Var day = now.getDate( ); 
6 if (month < 10) 1 
强 month = '0' + month; 
8 }; 
9 if (day < 10) ¥ 
10 day = '0' + day; 
11 }; 
1 Var formatDate = year + '-' + month + '-' + day; 
3 this.setData ({ 
14 date: formatDate 
ED JU 
16 人 


小 程序 运行 后 需要 在 出 生日 期 后 默认 显示 当前 的 日 期 , 而 Date 对 象 自动 使 用 当前 的 日 期 
和 时 间作 为 其 初始 值 ， 所 以 需要 自 定 义 一 个 代码 块 来 实现 日 期 显示 格式 的 转换 ， 即 能 够 以 
“YYYYMM-DD” 格 式 显示 日 期 。 

(3) 全 选 选择 事件 。 


代码 如 下 。 
化 likesChange: function (e) { 
交 if (e.detail.value[0] == "全 选 ') 1{ 
六 for (var i = 0; i < this.data.likeItems.length; i++) 1{ 
4 this.data.likeItems [i] .checked = true 
5 } 
6 } else { 
总 for (var i = 0; i < this.data.likeItems.length; i++) { 
8 this.data.likeItems[i] .checked = false 
9 } 
10 } 
11 this.setData ({ 
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下 2 likeItems: this.data.likeItems 
13 ]) 


上 述 代码 第 2~9 行 的 功能 表示 如 下 : 如 果 选 中 全 选 复 选 框 , 则 将 所 有 爱好 选项 的 checked 
值 置 为 “tmue”， 和 否则 置 为 “false”， 以 此 来 实现 全 选 和 全 不 选 。 

(4) 选择 器 事件 。 

代码 如 下 。 


1 /* 性 别 选 择 器 */ 

2 bindSexChange: function (e) { 
强 this.setData({ 

4 Sexindex: e.detail.value 
5 }) 

6 }, 

7 /* 出 生日 期 选择 器 */ 

8 pickDateChange: function (e) { 
9 this.setData({ 

10 birthDay: e.detail.value 
EE }) 

下 } 


’ 
13 /* 市 区 选择 器 */ 

14 pickRegionChange: function (e) { 
5 this.setData({ 

16 regions: e.detail.value 

名 / 二 

18 }, 


(5) 提交 表单 。 
代码 如 下 。 
formSubmit: function (e) { 


console.10g〈' 本 表单 输出 数据 为 : '，e.detail.value) 


}, 
formReset: function (e) { 
console.1og ('form 发 生 了 reset 事件 ') 


auw wm 


} 
上 述 代码 第 2 行 表示 单 击 界面 上 的 “保存 ”按钮 后 , 调试 器 窗口 输出 表单 中 填 入 的 数据 。 


全 国 高 校 每 年 都 有 很 多 大 学 毕业 生 步 入 社会 ， 为 了 能 及 时 了 解 本 校 毕 业 生 毕业 后 的 就 业 
情况 , 需要 开展 满意 度 情 况 调 查 。. 本 节 以 一 个 简单 的 毕业 生 满 意 度 调查 表 案 例 介 绍 picker-view 
〈 据 入 页 面 的 滚动 选择 器 ) 和 slider (滑动 选择 器 ) 组 件 的 基本 用 法 。 
4.5.1 预备 知识 


picker-view 
picker-view 组 件 通常 作为 嵌入 页 面 的 滚动 选择 器 , 而 picker 是 从 底部 弹 起 “511 


dBS 
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的 滚动 选择 器 ， 在 实际 使 用 中 ，picker-view 组 件 与 picker-view-column 组 件 配合 使 用 具有 更 
大 的 灵活 性 。picker-view 组 件 的 常用 属性 及 功能 说 明 如 表 4-17 所 示 。 


表 4-17 picker-view 组 件 的 属性 及 功能 说 明 

功 能 
数组 中 的 数字 对 应 每 列 默认 显示 第 几 行 。 数 字 大 于 每 列 可 选项 长 度 时 ， 
显示 最 后 一 行 
设置 选择 器 中 间 选 中 框 的 样式 类 名 
设置 选择 器 中 间 选 中 框 的 样式 
设置 蒙 层 的 样式 类 名 
滚动 选择 内 容 ，value 改变 时 触发 change 事件 ，event.detail = {value: 
value}; value 为 数组 ， 表 示 picker-view 内 的 picker-view-column 当前 
选择 的 是 第 几 行 〈( 下 标 从 0 开始 ) 


属性 类 型 


value NumberArray 


indicator-class | String 
indicator-style | String 
mask-class String 


bindchange EventHandle 


picker-view-column 组 件 仅 可 放置 于 picker-view 组 件 中 ， 其 子 节点 的 高 度 会 自动 设置 成 
与 picker-view 选中 框 的 高 度 一 致 。 

下 面 以 一 个 自 定义 样式 的 日 期 时 间 选 择 器 为 例 介 绍 picker-view 和 picker-view-column 组 
件 的 使 用 步骤 , 运行 效果 如 图 4.25 所 示 。 小 程序 运行 后 , 在 页 面 中 嵌入 显示 1 个 能 够 选择 年 、 
月 、 日 、 时 、 分 的 日 期 时 间 选 择 器 ， 当 用 户 从 选择 器 上 选择 了 对 应 内 容 后 ， 其 会 自动 显示 在 
页 面 上 “你 的 预期 入 住 时 间 ” 下 方 。 另 外 ， 在 这 个 自 定义 的 日 期 时 间 选 择 器 上 选择 不 同 的 月 
份 时 ， 其 包含 的 天 数 也 随 之 改变 。 


eeees WeChats 11:12 
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尔 的 预期 入 住 时 间 : 
019 年 02 月 01 日 12 时 10 分 


图 4.25 ”picker-view 选择 器 


外 页 面 结构 文件 代码 。 


1 ”<label for='veiwtime'> 你 的 预期 入 住 时 间 : 

2 <view id='viewtime' style='"'padding-top:5px'>{{year}} 年 {{month}} 月 {{day}} 
日 {{hour}} 时 { {minute}} 分 </view> 

3 </label> 

4 <view class="time screens"> 

5 <View style="pading-top:2px;border-top:1px 

6 solid #45BCE8;height:25px;font-size:14px;"> 

沁 <view class="time-title"> 年 </view> 
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<view class="time-title"> 月 </view> 
<view class="time-title">H</view> 
<view class="time-title"> 时 </view> 
<view class="time-title"> 分 </view> 
</view> 
<picker-view 
indicator-style="height: 30px;background:#45bce8;opacity: 0.5;" 
style="height: 200px; color:green" 
mask-style='background:#45bce8;opacity: 0.5;" 
value="{{value}}" bindchange="bindChange"> 
<picker-view-column class="picker-text"> 
<view 
wx:for="{{years}}" 
style="line-height: 30px">{{item}}</view> 
</picker-view-column> 
<picker-view-column class="picker-text"> 
<View 
wx:for="{ {months}}" 
style="line-height: 30px">{{item}}</view> 
</picker-view-column> 
<!-- 日 、 时 、 分 选择 列 的 页 面 结构 代码 与 年 、 月 选择 列 的 页 面 结构 代码 一 样 --> 
</picker-view> 
</view> 


上 述 代码 第 1~3 行 用 于 显示 自 定义 的 日 期 时 间 选 择 器 上 选择 的 日 期 和 时 间 ;， 第 5~12 行 


用 于 在 自 定义 的 日 期 时 间 选 择 器 上 方 显示 “分 隔 线 、 和 年、 月、 日、 时、 分” 第 13~29 行 用 
于 在 页 面 嵌 入 自 定义 的 日 期 时 间 选 择 器 ,其 中 ,第 14 行 用 于 设置 选择 器 中 间 选 中 框 的 样式 ( 即 
高 度 为 30px、 背 景 颜色 为 机 5bce8、 透 明度 为 0.5), 第 15 行 用 于 设置 picker-view 组 件 的 样式 
( 即 高 度 为 200px、 文 字 颜 色 为 绿色 )， 第 16 行 用 于 设置 选择 器 蒙 层 的 样式 〈 即 背景 颜色 为 
#45bce8、 透 明度 为 0.5)， 第 17 行 用 value 和 bindchange 属性 分 别 设置 选择 器 每 列 默认 显示 
的 内 容 和 绑 定 的 事件 ， 第 18~22 行 用 picker-view-column 组 件 显示 “年 ” 列 的 内 容 ; 第 23~27 
行 用 picker-view-column 组 件 显示 “月 ” 列 的 内 容 。 其 他 列 的 内 容 显示 与 “年 ”“ 月 ” 列 类 似 ， 
不 再 袭 述 。 读 者 可 以 参阅 代码 包 lesson4_component\pages\picker 文件 夹 中 的 pickerview.wxml 
文件 的 内 容 。 
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@ 页 面 逻 辑 文件 代码 。 
。 初始 化 年 、 月 、 日 、 时 和 分 的 数组 数据 。 


const date = new Date( ) // 获 取 当 前 日 期 时 间 


const years = [] // 用 于 存放 年 

const months = [] // 用 于 存放 月 

const days = [] // 用 于 存放 日 

const hours = [] // 用 于 存放 时 

const minutes = [] // 用 于 存放 分 

var thisYear = date.getFullYear( ); // 取 得 当前 年 份 

Var thisMon = date.getMonth( ); // 取 得 当前 月 份 (0~11) 
var thisDay = date.getDate( ); // 取 得 当前 月 第 几 天 (1~31) 


for (let i = date.getFullYear(); i <= date.getFullYear() + 50; i++) { 
years.push (i) 

} 

for (let i = 1; i <= 12; i++) { 
Var K = i; 
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16 [1 

17 } 

18 months.push (K) 

下 Sa 

20 For (et de Te 1 <= 3 +) 
站 var Kk = i; 

22 if (0 <=i geg i<x10){ 

2 We OM 

24 } 

25 days.push (k) 

2 

27 for (let i = 0; i <= 23; i++) { 
28 Var k= i; 

29 i (0 <= LEE 0) 

30 ON 

31 | 

2 hours .push (k) 

3 03 

34 for (let i = 0; i <= 59; i++) { 
四 Var k= i; 

36 EE OO C= EE < LO 

37 7 OR 

38 } 

39 minutes .push (k) 

40 } 


41 if (0 <= thisMon && thisMon < 9) { 

42 thisMon = "0" + (thisMon + 1); //1~9 月 前 面 加 “0” 
43 } else { 

44 thisMon = (thisMon + 1); 


45 } 
46 if (1 <= thisDay && thisDay < 10) { 

47 thisDay = "0" + thisDay; /1/1~9 中 的 某 天 前 面 加 “0” 
48 } 


上 述 代 码 的 第 10~12 行 表示 将 从 当前 年 份 开始 的 未 来 50 年 的 年 份 存 入 years 数组 ; 第 
13~19 行 表示 将 1~12 月 以 “**” 格 式 存 入 months 数组 , 其 中 第 15~17 行 表示 如 果 是 1~9 月 ， 
则 需要 在 月 份 前 加 “0” 字 符 ; 第 20~26 行 表示 将 天 数 1~31 以 “**” 格 式 存 入 days 数组 ; 第 
27~33 行 表示 将 0~23 小 时 以 “**” 格 式 存 入 hours 数组 ; 第 34~40 行 表示 将 0~59 分 钟 以 “**” 
格式 存 入 minutes 数组 ;第 41~45 行 表示 如 果 取 得 的 当前 月 份 值 为 0~8 中 的 某 月 ， 则 需要 对 
“月 份 值 +1”( 系 统 函 数 的 月 份 返回 值 为 0~11)， 并 在 前 面 加 “0” 字 符 ; 第 46~48 行 表示 如 果 
取得 的 当前 某 天 值 为 1~9， 则 需要 在 某 天 前 加 “0” 字 符 。 

。 定义 并 初始 化 数据 。 


data: { 
years: years, 
year: date.getFullYear( )， 
months: months, 
month: thisMon, 
days: days, 
day: thisDay, 
values io thisMon = 1 thispay TAO Oz 


oauwm 必 wm 
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9 hours: hours, 

10 ad OO 

EL minutes: minutes, 
下 之 minute: "00"， 

13 ]} 


上 述 代 码 第 8 行 定义 的 value 数组 与 页 面 布局 代码 第 17 行 定义 的 picker-view 组 件 进行 绑 
定 ， 用 于 设置 在 日 期 时 间 选 择 器 上 默认 显示 的 当前 年 份 、 月 份 、 天 数 和 00 时 、00 分 。 
。 绑 定 自 定义 日 期 时 间 选 择 器 事件 。 


下 bindChange: function(e) { 

2 var val = e.detail.value 

3 this .setData({ 

4 year: this.data.years[val[0]], 

5 month: this.data.months[val[1]], 

6 day: this.data.days[val[2]], 

2 hour: this.data.hours[val[3]], 

8 minute: this.data.minutes[val[4]], 
9 }) 

10 var totalDay = new Date (this.data.year, this.data.month,0) .getDate( ); 
EE 于 Var changeDate = []; 

12 for (let i = 1; i <= totalDay; i++) { 
1 var k= i; 

14 if (0 <=i gg i<10) { 

15 = 

16 } 

生计 changeDate .push (K) 

18 } 

19 this.setData({ 

20 days: changeDate 

21 }) 

22 }, 


上 述 代 码 第 2 行 表示 获取 选择 器 上 返回 的 日 期 和 时 间 ， 第 3~9 行 表示 将 选择 器 上 返回 的 
日 期 和 时 间 传 递 给 存放 年 、 月 、 日 、 时 和 分 值 的 变量 year、month、day、hour 和 minute; 第 
10 行 代码 用 于 获取 日 期 时 间 选 择 器 上 返回 月 份 所 含有 的 天 数 ， 例 如 1 月 共 31 天 ，days 数组 
中 存 入 1~31，4 月 共 30 天 ，days 数组 中 存 入 1~30， 等 等 。 

页 面 样式 文件 代码 如 下 。 


.time screens { 
height: 500px; 
width: 100%; 
position: fixed; 
overflow: hidden; 

} 

.time-title { 
float: left; 
width: 20%; 

0 text-align: center; 
color: #45bce8; 
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户 
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E20 
13 .picker-text { 
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14 text-align: center; 
六 


加 slider 

slider (滑动 选择 器 ) 组件 由 滑 块 与 滑动 条 组 成 。 使 用 slider 可 以 计算 滑 块 迪 
在 滑动 过 程 中 占 整 个 滑动 条 的 比例 。 如 果 滑 动 条 的 整体 长 度 为 100， 则 滑动 的 
范围 为 0~100。 实 际 开发 中 常 使 用 滑动 选择 器 调节 声音 的 音量 、 颜 色 值 等 。slider 
的 常用 属性 及 功能 说 明 如 表 4-18 所 示 。 


表 4-18 slider 组 件 的 属性 及 功能 说 明 


4.5.1.2 


属 性 | 类 型 | 功 能 
value 当前 取 值 ， 默 认为 0 
min 滑动 条 的 最 小 值 ， 默 认为 0 
max 滑动 条 的 最 大 值 ， 默 认为 100 
滑 块 移动 的 步 长 ， 取 值 必须 大 于 0 且 可 被 max-min 整除 ， 默 
step Number 认为 1 
disabled 是 否 禁用 ， 默 认为 false 
color/backgroundColor 背景 条 的 颜色 ， 默 认为 #e9e9e9 
selected-color/activeColor 滑动 条 已 滑 过 的 颜色 ， 默 认为 所 aad19 
block-size 滑 块 的 大 小 ， 取 值 范围 为 12~28， 默 认为 28 
block-color 滑 块 的 颜色 ， 默 认为 #fEfEFF 
show-value 设置 是 否 显示 当前 value， 默 认为 false 
bindchange EventHandle | 完成 一 次 滑 块 拖 动 后 触发 的 事件 , event.detail = {value: value} 


下 面 以 实现 一 个 调 色 板 为 例 介绍 slider 组 件 的 使 用 步骤 。 运 行 效果 如 图 4.26 所 示 。 小 程 
序 运行 后 ， 可 以 使 用 3 个 滑动 选择 器 分 别 选择 红 、 绿 、 蓝 三 种 不 同 的 颜色 ， 并 能 根据 选择 的 
三 种 不 同 颜色 值 改变 下 方正 方形 的 显示 效果 。 


图 4.26 滑动 选择 器 


Q 页 面 结构 文件 代码 。 


下 <slider show-value value='red value' max="'255'" block-color='red' activeColor= 
"red' bindchange='redChange'> 红 </slider> 
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县 <slider show-value value='green value' max='255' block-color='green'" 
activeColor='green' bindchange='greenChange'> 绿 </slider> 

汪 <slider show-value value='blue value' max='255' block-color='blue' 
activeColor='blue' bindchange='blueChange'> 蓝 </slider> 

4 <view class='view-all'> 


5 <view class="'show-view' style="'align:center;background:rgb({{red value}}, 
{{green value}},{{blue value}})'> 
6 </view> 


沁 </view> 


上 述 代码 第 1 行 用 show-value 属性 设置 在 滑动 选择 器 右 侧 显 示 value 属性 值 ， 用 max 属 
性 设置 滑动 选择 器 滑动 条 的 最 大 长 度 为 255;， 用 block-color 属性 设置 滑动 选择 器 上 滑 块 的 颜 
色 为 红色 ; 用 activeColor 属性 设置 滑 块 滑 过 滑动 条 后 的 颜色 为 蓝 色 ; 用 bindchange 属性 绑 定 
滑动 选择 器 滑 块 拖 动 时 的 事件 。 

@ 页 面 逻辑 文件 代码 。 


下 Page ({ 

他 data: { 

3 Fred value: 0, 

4 green value: 0, 

5 blue value: 0, 

6 }, 

区 redChange: function(e) { 
8 this.setDatal({ 

9 red value: e.detail.value 
10 }) 

2 }, 


有 //greenChange 绿色 滑动 选择 器 拖 动 事件 ， 略 
13 //bluechange 赣 色 滑动 选择 器 拖 动 事件 ， 略 
La) 


上 述 代 码 第 7~11 行 定义 了 红色 滑动 选择 器 拖 动 事件 ， 将 滑动 选择 器 的 返回 值 
e.detailvalue 更 新 给 页 面 变 量 red_value， 绿 色 滑 动 选择 器 和 蓝 色 滑 动 选 择 器 拖 动 事件 与 此 事 
件 类 似 ， 不 再 袭 述 。 

@ 页 面 样式 文件 代码 。 


.View-all { 
display: flex; 
flex-direction: row; 
justify-content: center; 
width:100%; 

} 

.show-view { 
background: red; 
width: 100px; 

0 height: 100px; 
I 


FFPeoomo_wamnumn 必 wm 


4.5.2 ”满意 度 调查 表 的 实现 


主 界面 的 设计 
满意 度 调 查 表 的 主 界面 如 图 4.27 所 示 。 
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图 4.27 ”毕业 生 满意 度 调查 表 


主 界面 中 分 别 用 view 组 件 显示 “您 的 毕业 时 间 ? ”“ 您 的 薪资 水 平 ? ”“ 您 的 满意 度 ? 
“课程 设置 “任课 教师 ”及 “条 件 设施 ” 用 button 组 件 实现 提交 按钮 ; 用 image 组 件 显示 五 
角 星 图 标 。 

(1) 页 面 结构 文件 代码 。 

Q@ 毕业 时 间 日 期 选择 器 。 

代码 如 下 。 


ConoGODNDp 


<view class='question-class'> 
<view class='1line-class'> 您 的 毕业 时 间 ? </view> 
<view class='line-class'>{{year}} 年 {{month}} 月 {{day}}H</view> 
</view> 
<picker-view 
indicator-style="height: S50px;" 
style="background:#F67E1B; width: 100%; height:100px;" 
value="{ {value}}" bindchange="bindTimeChange"> 
<picker-view-column> 
<View wx:for="{ {years}}" style="line-height: 50px">{.item}} 年 </view> 
</picker-view-column> 
<picker-view-column> 
<view wx:for="1{ {months}}" style="line-height: 50px">: {item}} 月 </view> 
</picker-view-column> 
<picker-view-column> 
<view wx:for="!{ {days}}" style="line-height: 50px">{{item}}H</view> 
</picker-view-column> 
</picker-view> 


上 述 代码 第 1~4 行 用 于 显示 用 户 从 嵌入 页 面 的 日 期 选择 器 选择 的 日 期 ;第 5~18 行 用 于 


设置 日 


期 选择 器 的 样式 ， 该 日 期 选择 器 包含 “年 ”““ 月 ”“ 日 ”三 列 ， 其 中 ， 第 6 行 用 于 设置 


选择 器 中 间 选 中 框 的 样式 〈 即 高 度 为 50px)， 第 7 行 用 于 设置 日 期 选择 器 的 样式 〈 即 背景 色 
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为 杆 67E1B、 宽 度 为 100%、 高 度 为 100px)， 第 8 行 用 value 和 bindchange 属性 分 别 设置 选择 
器 每 列 默认 显示 的 内 容 和 绑 定 的 事件 ， 第 9~11 行 、12~14 行 、15~17 行 分 别 用 于 设置 日 期 选 
择 器 上 “年 ” “月”“ 日 ” 列 显示 的 内 容 。 
@ 薪资 水 平滑 动 选择 器 。 
代码 如 下 。 
<View class='question-class'> 
<view class='line-class'> 您 的 薪资 水 平 ? </view> 
<view class="'line-class'>{{salary}}</view> 
</view> 
<slider class='salary-class' 
min="1000' step="'500' max="'31000" 
activeColor="#FFA6A6' color="'#FFE3E3' 
block-color="'#F67E1B' block-size="'12" 
bindchange='bindsalaryChange'> 
0 </slider> 


上 述 代 码 第 1~4 行 用 于 根据 滑动 选择 器 上 拖 动 的 范围 显示 毕业 生 的 薪资 水 平 ， 第 5~10 
行 用 于 设置 滑动 选择 器 的 样式 ， 其 中 ， 第 6 行 用 于 设置 滑动 选择 器 最 大 值 为 31000、 最 小 值 
为 1000 和 拖 动 的 步 长 为 500， 第 7 行 用 activeColor 和 color 属性 分 别 设置 滑 块 滑 过 滑动 条 后 
的 颜色 和 滑动 选择 器 的 背景 颜色 ， 第 8 行 用 block-color 和 block-size 属性 分 别 设置 滑 块 背景 
色 和 滑 块 大 小 ， 第 9 行 用 bindchange 属性 绑 定 滑 块 拖 动 时 的 事件 。 

@ 满意 评分 。 

代码 如 下 。 

满意 度 评分 包含 “课程 设置 “任课 教师 ”和 “条 件 设施 ”三 个 方面 要 素 ， 每 个 要 素 最 
高 分 为 5 分 ， 最 低 分 为 0， 通 过 单 击 页 面 上 的 五 角 星 图 标 为 每 个 要 素 评 分 ， 并 将 三 个 要 素 的 
平均 分 作为 满意 度 最 终 得 分 显示 在 页 面 上 。 
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正 <view class='question-class'> 

2 <view class='1line-class'> 你 的 满意 度 评分 ? </view> 

3 <view class='line-class'>{{average}} 分 </view> 

4 </view> 

5 <view class='score-class '> 

6 <view class='question-class'> 

<view class='line-score-class'> 课 程 设置 </view> 

8 <view class='line-score-left-class'>{{kcScore}} 分 </view> 
9 </view> 

10 <block class='question-class' 

正业 wx:for="{{stars}}" wx:for-index="itemIndex" 

12 Wx:for-item="itemName"> 

13 <image class='star icon' bindtap='starKCClick' id='{{itemName}}' src= 
"{{kcScore<itemName?'../images/black.png':'../images/light.png'}}"></image> 
14 </block> 

下 <view class='question-class'> 

16 <view class='line-score-class'> 任 课 教师 </view> 

工 7 <view class='line-score-left-class'>{{jsScore}} 分 </view> 
18 </view> 

Ea <block class='question-class" 

20 wx:for="{{stars}}" wx:for-index="itemIndex" 


区 wzx:for-item-="itemName"> 
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4 <image class='star icon' bindtap="'starJSClick' id='{{itemName}}' src= 
"{{jsScore<itemName?'../images/black.png':'../images/light.png'}}"></image> 
si </block> 


24 <view class="'question-class'> 

25 <view class='line-score-class'> 条 件 设施 </view> 

26 <view class='line-score-left-class'>{{tjScore}} 分 </view> 

7 </view> 

28 <block class='question-class' 

29 wx:for="{{stars}}" wx:for-index="itemIndex" 

30 Wx:for-item="itemName"> 

人 二 <image class='star icon' bindtap="'starTJClick' id='{{itemName}}' src= 


"{{tjSscore<itemName?'../images/black.png':'../images/light.png'}}"></image> 
32 </block> 
33 </view> 


上 述 代 码 的 第 1~4 行 用 于 显示 满意 度 评分 ， 第 6~14 行 用 于 定义 “课程 设置 ”评分 要 素 
的 显示 样式 ， 其 中 第 6~9 行 用 于 显示 用 户 对 “课程 设置 ”要 素 的 评分 值 ， 第 10~14 行 用 于 控 
制 “ 五 角 星 ” 图 标 在 页 面 上 的 显示 样式 ， 首 先 需 要 在 小 程序 项 目下 创建 images 文件 夹 ， 并 将 
未 选中 的 “五 角 星 ” 图 片 (black.png) 和 选中 的 “五 角 星 ” 图 片 (light.png) 放 入 该 文件 夹 中 ， 
然后 通过 设置 第 13 行 代码 中 image 组 件 的 src 属性 来 控制 是 加 载 未 选中 图 片 (black.png) 还 
是 选中 图 片 〈lightpng)。“ 任 课 教师 ”和 “条 件 设 施 ” 评 分 要 素 与 “课程 设置 ”评分 要 素 的 
设计 原理 一 样 ， 不 再 袭 述 。 

@ 页 面 结构 。 


<!--index.wxml-—-—> 

<View class="container"> 

<!-- 毕业 时 间 日 期 选择 器 --> 

<!-- 薪资 水 平滑 块 选 择 器 --> 

<!-- 满意 度 评 分 --> 

<button style='background:#F67E1B;width:100%'> 提 交 </button> 
</view> 


(2) 页 面 样式 文件 代码 。 


/**index.wxss**/ 
.container { 
padding: 5px; 
height: 100%; 
display: flex; 
flex-direction: column; 
} 
.question-classt{ 
display: flex; 
10 flex-direction: row; 
} 
.line-class{ 
13 border-bottom:solid lpx;width:100%; 
14 Color:#F67E1B; 
Ts 
16 .salary-classt{ 
yi padding-—left:5px; 
18 background:rgba (207, 195, 18, 0.555); 
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OooODpre 


[ 
Dp 


毕业 时 间 、 用 slider 组 件 实现 薪资 水 平 的 选择 、 用 image 组 件 实现 “课程 设置 、 
任课 教师 和 条 件 设施 ?满意 度 的 评分 .用 button 组 件 实现 满意 度 调查 表 的 提交 。 


oauwmwwn 请 
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width:80%; 
height:18px; 

. 

.Score-classt{ 
padding-left: 40px; 

} 

.line-score-classt{ 
padding-top: 12px; 
color:rgba (106, 116, 109, 0.897); 

} 

.line-score-left-class{ 
padding-left: 50px; 
padding-top: 12px; 
color:rgba (106, 116, 109, 0.897); 

} 

.star icont{ 
padding-top: 12px; 
padding-right: S5px; 
width: 35px; 
height: 35px; 

} 


功能 实现 
本 小 程序 实现 的 主要 功能 包括 3 个 : 用 嵌入 页 面 的 自 定 义 日 期 选择 器 选择 国名 


(1) 定义 并 初始 化 年 、 月 、 日 数据 。 
代码 如 下 。 4.5.2.2 


const date = new Date( ) 
const years = [] 
const months = [] 
const days I! 
for (let i 1990; i <= date.getFullYear( ); i++) { 
years.push (i) 
} 
for (et i = TL <= 12 Tt) 4 
months.push (i) 
了 
Tor Wnt ol = I 9AO 
days.push (i) 
了 


上 述 代 码 第 5~7 行将 从 1990 年 开始 到 现在 的 当前 年 份 作为 日 期 选择 器 年 份 选择 内 容 ; 


第 8~10 行将 从 1~12 月 作为 日 期 选择 器 月 份 选择 内 容 ; 第 11~13 行将 从 1~31 作为 日 期 选择 


器 


选择 内 容 。 


(2) 定义 并 初始 化 其 他 数据 。 
代码 如 下 。 


data: { 
years, 


Js) 
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3) year: date.getFullYear( )， 
4 months, 
与 month: date.getMonth( ) + 1， 
6 days， 
霸 day: date.getDate( )， 
8 Value [99997 07 0x 
9 salary: ' 低 于 5000 元 '， 
10 average: 0,// 满 意 度 评分 
4 kcScore: 0, // 课 程 评分 
12 jsscore: 0,// 教 师 评分 
LE3 tjScore: 0,// 设 施 评分 
14 stars: [1,2,3,4,5]// 星 级 个 数 
15 本 

(3) 日 期 选择 器 事件 。 

代码 如 下 。 
1 bindTimeChange: function (e) { 
人 const val = e.detail.value 
3 this.setData({ 
4 year: this.data.years[val[0]], 
5 month: this.data.months[val[1]]， 
6 day: this.data.days[val[2]] 
六 }) 
8 Var totalDay = new Date(this.data.year, this.data.month, 0) .getDate( ); 
9 var changeDate = []; 
10 for (let i = 1; i <= totalDay; i++) { 
Ji changeDate.push (i) 
2 } 
3 this.setDatal({ 
14 days: changeDate 
下 全 }) 
16 ' 


上 述 代码 的 第 4-6 行 分 别 表示 将 日 期 选择 器 选择 的 年 .月 .日 同步 更 新 到 页 面 上 ; 第 8~15 
行 用 于 在 日 期 选择 器 上 月 份 发 生变 化 时 ， 日 所 在 列 对 应 可 选择 的 天 数 也 发 生变 化 ， 如 1 月 份 
有 31 天 、4 月 份 只 有 30 天 。 

(4) 薪资 水 平滑 动 选 择 器 事件 。 

代码 如 下 。 


和 bindsalaryChange: function (e) { 

2 Var val = parseInt (e.detail.value) 
3 if (val < 5000) { 

4 this.Gata.3salary = '" 低 于 5000 元 " 

5 } else if (val < 10000) { 

6 this.data.salary = '5000~10000 元 " 
人 } else if (val < 20000) { 

8 this.data.salary = '10000~20000 元 ' 
9 } else if (val < 30000) { 


10 this.data.salary = '20000~30000 元 ' 
生计 } else { 
12 Ehistaata salary — “T30000, 
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14 this.setData({ 
15 salary: this.data.salary 
16 }) 
17 }, 

(5) 课程 设置 评分 事件 。 

代码 如 下 。 
1 StarKCC1ick: function (e) { 
区 var index = parseInt (e.currentTarget.id); 
3 var average = (index + this.data.jsScore + this.data.tjScore) / 3 
4 this.setData({ 
号 kcScore: index， 
6 average: average.toFixed (2) 
惠 ]) 7 
8 }, 


由 于 页 面 设置 代码 中 将 每 个 显示 “五 角 星 ”图 标 image 组 件 的 id 属性 设置 为 对 应 数组 元 
素 值 ， 即 为 该 “五 角 星 ” 图 标的 得 分 ， 所 以 上 述 代 码 第 2 行 表示 将 当前 单 击 的 image 组 件 的 
id 取出 来 并 转换 为 整 型 数据 作为 当前 的 课程 设置 评分 值 ， 然 后 在 第 3 行 代码 中 将 其 与 任课 教 
师 评 分 〈jsScore) 和 条 件 设 施 评分 〈tScore) 求 出 平均 值 ， 作 为 满意 度 评 分 。 

任课 教师 评分 事件 、 条 件 设施 评分 事件 与 课程 设置 评分 事件 类 似 ， 提 交 事件 比较 简单 ， 
此 处 不 再 更 述 ， 详 细 代码 可 以 参阅 代码 包 lesson4 job 文件 夹 中 的 内 容 。 


OO 4.6 购物 小 程序 的 设计 与 实现 。 


随 着 网 上 购物 需求 的 增加 ， 越 来 越 多 的 商家 都 需要 开发 移动 客户 端的 购物 小 程序 ， 这 些 
小 程序 通常 都 会 包含 商品 列表 展示 、 商 品 详情 展示 、 购 物 车 内 容 展示 及 “我 的 购物 ”4 个 方 
面 的 功能 。 本 节 将 综合 应 用 前 面 介绍 的 基本 界面 组 件 、navigator (页 面 链接 组 件 ) 及 小 程序 
开发 框架 提供 的 wx.previewImage( )、wx.requestPayment( ) 及 路 由 API， 开 发 设计 一 个 完整 的 
购物 小 程序 。 sin tbl 


4.6.1 ”预备 知识 


navigator 
navigator 组 件 用 于 在 WXML 页 面 中 实现 单 击 跳 转 的 导航 , 它 的 常用 属性 及 “611 
功能 说 明 如 表 4-19 所 示 ， 可 以 由 open-type 属性 值 设置 多 种 不 同 的 跳 转 类 型 ， 如 表 4-20 所 示 。 


表 4-19 _ navigator 组 件 的 属性 及 功能 说 明 


属 性 类 型 功 能 
tt String 在 哪个 目 标 上 发 生 跳 转 ， 可 选 值 为 self/miniProgram， 默 认为 self， 即 在 当前 
小 程序 上 发 生 跳 转 
url String 当前 小 程序 内 的 跳 转 链接 地 址 
open-type String 跳 转 类 型 ， 其 值 如 表 4-20 所 示 ， 默 认为 navigate 
delta Number | 当 open-type 为 navigateBack 时 有 效 ， 表 示 回 退 的 层 数 
app-id String 当 target="miniProgram" 时 有 效 ， 要 打开 的 小 程序 appId 


dl 
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续 表 
属 性 类 型 功 能 
path String 当 target="miniProgram" 时 有 效 ， 打 开 的 页 面 路 径 ， 如 果 为 空 则 打开 首页 
. 当 target="miniProgram" 时 有 效 ， 需 要 传递 给 目标 小 程序 的 数据 ， 目 标 小 程序 
ih Object 可 在 App.onLaunch( )，App.onShow( ) 中 获取 到 该 数据 
i Sting 指 定单 击 时 的 样式 类 ， 当 hover-class="none" 时 ， 没 有 单 击 态 效果 ， 默 认为 
navigator-hover 
bindsuccess String 当 target="miniProgram" 时 有 效 ， 跳 转 小 程序 成 功 
bindfail String 当 target="miniProgram" 时 有 效 ， 跳 转 小 程序 失败 
bindcomplete | String 当 target="miniProgram" 时 有 效 ， 跳 转 小 程序 完成 
表 4-20 open-type 的 属性 值 及 功能 说 明 

属性 值 功 能 

默认 值 ， 保 留 当 前 页 面 ， 跳 转 到 本 应 用 内 的 某 个 页 面 或 打开 另 一 个 小 程序 ， 对 应 
hi wx.navigateTo( ) 或 wx.navigateToMiniProgram( ) 的 功能 ， 但 不 能 跳 转 到 tabBar 页 面 

- 关闭 当前 页 面 ， 跳 转 到 本 应 用 内 的 某 个 页 面 ， 对 应 wx.redirectTo( ) 的 功能 ， 但 不 能 跳 转 
a 到 tabBar 页 面 
switchTab 跳 转 到 tabBar 页 面 ， 并 关闭 其 他 所 有 非 tabBar 页 面 ， 对 应 wx.switchTab( ) 
reLaunch 关闭 所 有 页 面 ， 打 开 到 应 用 内 的 某 个 页 面 ， 对 应 wx.reLaunch( ) 
navigateBack | 关闭 当前 页 面 ， 返 回 上 一 页 面 或 多 级 页 面 ， 对 应 wx.navigateBack( ) 
exit 退出 小 程序 ，target="miniProgram" 时 生效 

例如 ， 当 前 小 程序 项 目 中 有 pages/index/index、pages/navigate/navigate、pages/redirect/ 


redirect 和 pages/switchtab/switchtab 等 4 个 页 面 ， 其 中 index 和 switchtab 为 tabBar 上 的 页 面 。 


其 中 index 页 再 


i 结构 文件 代码 如 下 : 


<view class="container"> 
<navigator url='../navigate/navigate'> 


</navigator> 


于 
2 
3 <button> 跳 转 新 页 面 </button> 
4 
5 


</view> 


上 述 代码 的 第 2~4 行 表 示 在 navigator 组 件 中 内 嵌 了 button 组 件 来 实现 页 面 跳 转 功能 , 其 
中 也 可 以 内 嵌 其 他 组 件 。 第 2 行 代 码 的 navigator 组 件 中 并 没有 设置 open-type 属性 ， 而 默认 
使 用 navigate 属性 值 ， 所 以 单 击 “ 跳 转 新 页 面 ” 按 钮 时 会 保留 当前 页 面 ， 并 跳 转 到 
pages/navigate/navigate 页 面 。 

如 果 将 上 述 代码 的 第 2 行 修改 为 如 下 代码 ， 则 不 能 跳 转 到 switchtab 页 面 。 因 为 如 果 
open-type 属性 值 为 redirect 和 navigate， 则 其 指定 的 页 面 跳 转 不 能 跳 转 到 tabBar 上 的 页 面 ， 
而 switchtab 页 面 属 于 tabBar 上 的 页 面 。 


. <navigator url="'../switchtab/switchtab> 


如 果 将 上 述 代码 的 第 2 行 修改 为 如 下 代码 ， 则 可 以 跳 转 到 switchtab 页 面 。 因 为 如 果 
open-type 属性 值 为 switchTab， 则 其 指定 的 页 面 跳 转 只 能 跳 转 到 tabBar 上 的 页 面 。 


于 <navigator open-type='switchTab' url="'../switchtab/switchtab'> 
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如 果 在 pages/navigate/navigate 页 面 结 构 文 件 中 增加 如 下 代码 ， 则 单 击 “ 返 回 ” 按 钮 时 ， 
会 跳 转 到 pages/index/index 页 面 ， 即 返回 上 一 个 页 面 。 
1 <navigator open-type="navigateBack"> 


2 <button> 返 回 </button> 
3 </navigator> 


但 是 ， 如 果 将 pages/index/index 页 面 结构 文件 代码 修改 为 如 下 代码 ， 则 单 击 “ 返 回 ” 按 
钮 时 不 会 跳 转 回 上 一 个 页 面 。 因为 open-type 属性 值 为 navigate 的 页 面 跳 转 ， 相 当 于 在 当前 页 
面 上 又 覆盖 了 一 层 新 页 面 ， 所 以 使 用 navigateBack 属性 值 可 以 返回 ， 而 open-type 属性 值 为 
redirect 的 页 面 跳 转 ,相当 于 直接 用 新 页 面 替换 了 当前 页 面 , 所 以 使 用 navigateBack 属性 值 不 
可 以 返回 。 


1 <view class="container"> 

训 <navigator open-type='redirect' url='../navigate/navigate'> 
3 <button> 跳 转 新 页 面 </button> 

4 </navigator> 

5 </view> 


当然 ， 如 果 将 上 述 代码 第 2 行 的 open-type 属性 值 设 置 为 reLaunch， 则 url 属性 值 可 以 设 
置 为 应 用 内 的 任意 一 个 页 面 ， 但 使 用 navigateBack 属性 值 不 可 以 返回 。 

如 果 页 面 跳 转 时 需要 将 当前 页 面 的 数据 传递 给 新 打开 的 页 面 ， 可 以 给 navigator 组 件 的 
url 属性 值 使 用 如 下 格式 : 


1 <navigator url=' 需 要 跳 转 的 新 页 面 路 径 ?参数 名 1= 值 1& 参 数 名 2= 值 2&…… ”3 
2 <!-- 其 他 代码 --> 


3 </ navigator> 
新 页 面 如 果 要 获取 其 他 页 面 传递 过 来 的 数据 ， 需 要 在 新 页 面 罗 辑 文件 中 使 用 如 下 格式 : 


onLoad: function (options) { 
var 变量 名 1 = options .参数 名 1 
var 变量 名 2 = options .参数 名 2 
// 其 他 参数 ee 
this.setData({ 
页 面 变量 名 1: 变量 名 1， 
页 面 变量 名 2: 变量 名 2， 
// 其 他 页 面 变量 名 … 
}) 
l 


例如 ， 在 pages/index/index 页 面 结构 文件 中 有 如 下 代码 : 


LE <lindex-wxml==> 
<view class="container"> 


FoOo~wamnummwnb 
Ll 


o 


3 <navigator open-type='navigate' url='../navigate/navigate?userName= 
nipaopao?userPwd=123456789'> 

4 <button> 带 参数 跳 转 新 页 面 </button> 

所 </navigator> 


6 </view> 


上 述 代码 第 3 行 表示 当 单 击 “ 带 参数 跳 转 新 页 面 ”按钮 时 ， 会 向 新 打开 的 页 面 pages/ 
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navigate/navigate 传递 userName 和 userPwd 两 个 参数 。 在 新 打开 页 面 pages/navigate/navigate 
的 逻辑 文件 中 用 如 下 代码 获得 pages/index/index 页 面 传递 过 来 的 userName 和 userPwd 参数 ， 
并 将 获得 的 数据 保存 在 pages/navigate/navigate 页 面 变量 userName 和 userPwd 中 ， 以 便 在 
pages/navigate/navigate 页 面 结构 文件 中 调用 。 


1 Page ({ 
2 data: { 
3 userName: '"', 
4 userPwds "" 
5 }, 
6 onLoad: function (options) { 
2 Var name = options.userName 
8 Var pwd = options .userPwd 
9 this.setDatal({ 
10 userName: name, 
于 下 userPwd: pwd 
2 }) 
13 } 
I 
路 由 API 


navigator 组 件 主要 用 于 在 小 程序 的 页 面 结构 文件 WXML 中 实现 单 击 跳 转 后 
的 导航 , 而 微 信 小 程序 框架 还 提供 了 在 小 程序 的 页 面 罗 辑 文件 中 实现 页 面 跳 转 踏 
的 路 由 API。 i} 
(1) wx.switchTab(Object): 跳 转 到 tabBar 页 面 ， 并 关闭 其 他 所 有 非 回 


tabBar 页 面 。 其 使 用 代码 格式 如 下 : 4612 
hs toSwitchTab:function(e){ 

区 WwWX.SwitchTab ({ 

3 url: '../switchtab/switchtab',// 需 要 跳 转 的 tabBar 页 面 的 路 径 
4 success: function (e) { // 接 口 调用 成 功 的 回调 函数 

5 console.1og(e,'success!') 

6 }, 

吕 fail: function (e) { // 接 口 调用 失败 的 回调 函数 

8 console.log(e, 'failure!') 

9 ]}v 

10 complete: function (e) { // 接 口 调用 完成 的 回调 函数 

和 console.1log(e, 'complete!') 

12 } 

13 让 


14 } 


上 述 代 码 第 3 行 表示 需要 跳 转 的 tabBar 页 面 的 路 径 ， 该 页 面 必须 在 appjson 文件 中 的 
tabBar 字段 中 定义 ， 并 且 路 径 后 不 能 带 参 数 。 

(2) wx.reLaunch(Object): 关闭 所 有 页 面 ， 打 开 到 应 用 内 的 某 个 页 面 。 其 使 用 代码 格式 
与 wx.switchTab(Objecb 类 似 ， 但 是 需要 跳 转 到 的 应 用 内 页 面 路 径 后 可 以 带 参 数 。 

(3) wx.redirectTo(Object): 关闭 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ， 但 是 不 允许 跳 转 
到 tabBar 页 面 。 其 使 用 代码 格式 与 wx.switchTab(Objecb 类 似 ， 但 是 需要 跳 转 的 应 用 内 页 面 
路 径 后 可 以 带 参数 。 

(4) wx.navigateTo(Object): 保留 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ， 但 是 不 允许 跳 转 
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到 tabBar 页 面 。 其 使 用 代码 格式 与 wx.switchTab(Object) 类 似 ， 但 是 需要 跳 转 的 应 用 内 页 面 
路 径 后 可 以 带 参数 。 使 用 wx.navigateBack 可 以 返回 到 原 页 面 。 小 程序 中 的 页 面 栈 最 多 
十 层 。 

(5) wx.navigateBack(Object): 关闭 当前 页 面 ， 返 回 上 一 页 面 或 多 级 页 面 。 可 通过 
getCurrentPages( ) 函 数 获 取 当 前 的 页 面 栈 ， 决 定 需要 返回 几 层 。 其 使 用 代码 格式 如 下 : 

Q index 页 面 结 构 文件 代码 。 
1 <view class="container"> 


2 <button bindtap='toNavigate'> 跳 转 navigate 页 面 </button> 
3 </view> 


@ index 逻辑 文件 代码 。 


toNavigate: function (e) { 
wx.navigateTo ({ 
url: '../navigate/navigate', 
3 
| 


@) navigate 页 面 结构 文件 代码 。 
1 <view class="container"> 


2 <button bindtap='toRedirect'> 跳 转 redirect 页 面 </button> 
3 </view> 


@ navigate 逻辑 文件 代码 。 


toRedirect: function (e) { 
wx.navigateTo ({ 
url: '../ redirect/redirect', 
}) 
} 


@ redirect 页 面 结构 文件 代码 。 


1 <view class="container"> 
2 <button bindtap='toReturn'> 返 回 </button> 
3 </view> 


@ redirect 页 面 逻 辑 文件 代码 。 


toReturn:function(e){ 
wx.navigateBack ({ 


韦 
轨 
3 delta:2 // 返 回 的 页 面 数 ， 如 果 delta 大 于 现 有 页 面 数 ， 则 返回 到 首页 
4 
局 


wo wm 


w 心 wN PP 


}) 
1 


上 述 代 码 第 3 行 用 delta 指定 单 击 redirect 页 面 的 “返回 ”按钮 回 退 的 页 面 层 数 为 2， 本 
例 中 也 就 是 回 退 到 index 页 面 。 如果 删 除 此 行 ， 则 默认 回 退 的 页 面 层 数 为 1， 本 例 中 也 就 回 退 
到 navigate 页 面 。 如 果 不 使 用 逻辑 文件 代码 实现 此 功能 ,也 可 直接 在 redirect 的 页 面 结构 文件 
中 直接 实现 ， 其 代码 如 下 : 


1 <navigator open-type="navigateBack" delta='2'> 


2 
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2 <button> 返 回 </button> 
号 </navigator> 


全 屏 预览 图 片 API 

微 信 小 程序 框架 提供 了 在 新 页 面 中 全 屏 预 览 图 片 的 API 一 一 wx.previewImage (Object)， 
使 用 该 函数 实现 全 屏 图 片 预览 时 ， 可 以 进行 图 片 保存 或 发 送 给 朋友 等 操作 。 其 使 用 代码 格式 
如 下 : 

(1) 页 面 结构 文件 代码 。 


1 <view class='detailpic'> 


2 <block wx:for="{{imglist}}" wx:for-item="img"> 

1 <image class='detail pic img' src='{{img}}' data-src="{{img}}" bindtap= 
"showPic"></image> 

4 </block> 


5 </view> 


上 述 代 码 第 2~4 行使 用 列表 演 染 的 方法 在 页 面 上 用 image 组 件 显示 imglist 数组 中 指定 地 
址 的 图 片 ， 并 给 image 组 件 绑 定 了 showPic( ) 方 法 ,该 方法 用 于 单 击 图 片 时 ,在 页 面 上 全 屏 预 
览 当 前 单 击 的 图 片 。 

(2) 页 面 逻辑 文件 代码 。 


和 Page ({ 

这 data: { 

EE imglist:['https://zsc.nnutc.edu.cn/img/bannerl .png', 
'https://zsc.nnutc.edu.cn/img/banner2.png', 
"https://zsc.nnutc.edu.cn/img/banner3.png '] 

和 }， 

5 showPic: function(e) { 

6 Var current = e.target.dataset.src; 

| Wx.previewImage ({ 

8 current: current, // 当 前 显示 图 片 的 http 链接 

9 urls: this.data.imglist, // 需 要 预览 的 图 片 http 链接 列表 

10 success: function (e) { // 接 口 调用 成 功 的 回调 函数 

下 证 console.1log(e,'success!') 

12 br 

了 3 fail: function (e) 1 // 接 口 调用 失败 的 回调 函数 

14 console.1log(e, 'failure!') 

15 }, 

16 complete: function (e) { // 接 口 调用 完成 的 回调 函数 

下 了 console.1log(e, 'complete!') 

18 } 

19 }) 

20 kg 


21 1}) 
上 上 述 代码 第 3 行 定义 了 在 页 面 上 要 显示 的 图 片 地 址 数组 imglist， 第 6 行 代码 用 于 获得 页 


面 结构 文件 中 绑 定 的 src 数据 (该 数据 其 实 就 是 当前 页 面 显示 的 图 片 的 http 地 址 )， 以 便 在 单 
击 该 图 片 时 ， 在 页 面 上 全 屏 显 示 该 图 片 。 


区 9 第 4 章 基本 组 件 


4.6.2 ”购物 小 程序 的 实现 


本 项 目 一 共 包含 首页 、 购 物 车 、 商 品 详情 和 个 人 中 心 等 4 个 页 面 ， 其 中 首页 、 购 物 车 、 
个 人 中 心 页 面 需要 以 tabBar 的 形式 展示 ， 并 能 够 在 单 击 tabBar 的 对 应 图 标 时 站 加 
进行 互相 切换 。 启 动 购物 小 程序 ， 直 接 打开 “首页 ”页 面 ， 单 击 “ 首 页 ”页 面 哗 
左 侧 的 商品 分 类 后 ， 页 面 右 侧 显示 该 商品 分 类 下 的 所 有 商品 ， 单 击 右 侧 的 商品 
列表 中 感 兴趣 的 商品 后 进入 “商品 详情 ”页 面 ;“ 商 品 详情 ”页 面 展示 该 商品 
的 详细 信息 , 单 击 页 面 底部 的 “ 放 入 购物 车 ”按钮 , 可 以 将 该 商品 放 入 购物 车 ; 
单 击 tabBar 上 的 “购物 车 ”图 标 后 进入 “购物 车 ”页 面 ， 该 页 面 上 展示 了 用 户 已 经 选择 的 所 
有 商品 ， 通 过 “ 增 、 减 ”商品 数量 和 “删除 ”商品 可 以 进行 “购物 车 ”商品 信息 的 修改 ， 单 
击 tabBar 上 的 “我 的 ”图 标 后 ， 进 入 “个 人 中 心 ”页 面 ， 该 页 面 用 于 展示 用 户 的 姓名 、 联 系 
电话 、 收 货 地 址 等 信息 ， 也 可 以 在 此 页 面 适当 修改 信息 。 

项 目 创建 

根据 购物 小 程序 的 功能 需求 ， 在 项 目 中 创建 图 4.28 所 示 的 目录 结构 ， 其 中 index 文件 夹 
用 于 存放 首页 页 面相 关 文件 、cart 文件 夹 用 于 存放 购物 车 页 面相 关 文 件 、detail 文件 夹 用 于 存 
放 商 品 详情 页 面相 关 文件 、me 文件 夹 用 于 存放 个 人 中 心 页 面相 关 文件 、images 文件 夹 用 于 
存放 购物 小 程序 中 用 到 的 图 片 (图标) 文件 。 


4.6.2.1 


vB pages 


» 吕 cart 
， detail 会 
”四 images firstpng 
v DD index 
indexjs 

{) indexjson 

<> index.wxml 

wss index.wxss 
Pme 

appjs 已 
{) appjson Le 
wss app WXSS saleb.png salel.png 


{*) project config json 


4.28 项 目 目录 结构 图 4.29 tabBar 图 标 文件 


tabBar 底部 标签 的 设计 
首先 将 图 4.29 所 示 的 图 标 文件 复制 到 images 文件 夹 中 ,然后 修改 appjson 文 件 代 码 如 下 : 


"pages":[ 
"pages/index/index", 
"pages/cart/cart", 
"pages/me/me", 
"pages/detail/detail" 

]， 

"window":{ 

"backgroundTextstyle":"light", 

0 "navigationBarBackgroundColor": "#3E5F81", 


Fowamnuw 必 wmn 


2 区 
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上 "navigationBarTitleText": "WeChat", 

12 "navigationBarTextSstyle":"white" 

13 二 

14 "Eabbar”s € 

二 "color": "#B8ABAC", 

16 "selectedColor": "#000000", 

下 wt 

18 ' 

19 "pagePath": "pages/index/index", 

20 "text": "首页 "， 

2 "iconPath": "pages/images/firstb.png", 

2 "selectedIconPath": "pages/images/firstl.png" 
23 br 

24 { 

25 "pagePath": "pages/cart/cart", 

26 "text": "购物 车 "， 

二 "iconPath": "pages/images/saleb.png", 

28 "selectedIconPath": "pages/images/salel.png" 
忆 3 by 

30 { 

kh "pagePath": "pages/me/me", 

32 EE 的 

SS3 "iconPath": "pages/images/meb.png", 

34 "selectedIconPath": "pages/images/mel.png" 
35 } 

36 ] 

37 } 

38. 3 


上 述 代 码 第 2~7 行 用 于 配置 购物 小 程序 的 页 面 信息 ， 其 中 第 3 行 指 向 小 程序 运行 后 的 第 
一 个 页 面 ， 第 8~13 行 用 于 配置 购物 小 程序 顶部 导航 条 的 样式 ， 其 中 第 11 行 代码 定义 导航 条 
上 显示 的 文本 内 容 。 由 于 每 个 页 面 导 航 条 上 显示 的 文本 都 不 一 样 ,所 以 进行 每 个 页 面 配置 时 ， 
还 需要 修改 每 个 页 面 的 配置 文件 〈 即 修改 每 个 页 面 的 json 文件 ); 第 14-37 行 用 于 配置 购物 
小 程序 的 tabBar 底部 标签 。 

首页 页 面 的 设计 与 实现 

(1) 首页 界面 设计 。 

从 图 4.30 可 以 看 出 , 首页 页 面 主要 包含 3 部 分 的 内 容 : 左 侧 商品 分 类 栏 、 
右上 侧 商品 推荐 栏 和 右 下 侧 商品 列表 栏 。 

Q@ 页 面 结构 文件 代码 。 


< index wm > 

2 <view> 

加 <!-- 左 侧 商品 分 类 栏 --> 

4 <scroll-view class='left-navbar' scroll-y> 

二 <view wx:for="{ {navIitems}}" class="{{curNav 一 index? 'active' : ''}}" bindtap= 
"leftClick" data-index="{ {index}}">{{item.name}} 

6 </view> 

7 </scroll-view> 

8 <scroll-view class="right" scroll-y scroll-top="{{scrollTop}}"> 

9 <! 一 -右上 侧 商 品 推荐 栏 --> 


10 <image class="img-banner" src="{{navIitems[curNav .topicon}}" mode= 
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"scaleToFill"> </image> 


ne <! 一 右 下 侧 商 品 列表 栏 --> 


12 <view class="goods-list"> 

13 <view wx:for="'{{navItems[curIndex] .sub}}' class="goods" > 

14 <navigator url="/pages/detail/detail?id={ {item.id}} hover-class= "navigator— 
hover"> 

Is <image class="img" src="{{item.icon}}"></image> 

16 <text class='goods-title' >{{item.name}}</text> 

hs </navigator> 

18 </View> 

L9 </view> 

20 </scroll-view> 


21 </view> 


美食 
sx | 站 。 wr i 
家 电 |- 这 


商品 分 类 栏 一 


洗 护 | 白 日 看 。 防 西 和 尘 鼎 科 | 一 商品 列表 栏 


[5 


图 4.30 ”购物 小 程序 (首页 ) 


上 述 代码 第 4-7 行 定 义 了 左 侧 商品 分 类 栏 的 页 面 结 构 。 第 4 行 代 码 使 用 scroll-view 组 件 
的 scroll-y 属性 指定 商品 分 类 栏 可 以 垂直 滚动 ; 第 5 行 代码 使 用 view 组 件 控制 商品 类 名 称 的 
显示 ，wx:for 控制 属性 用 于 绑 定 商品 分 类 名 称 数组 (navItems), 进行 商品 分 类 列表 泻 染 ，class 
属性 使 用 {{curNav == index ? 'active' : 中} 语句 ， 表 示 如 果 左 侧 商 品 分 类 数组 的 index 与 
curNav( 用 户 单 击 左 侧 商 品 分 类 返回 的 值 ) 相同 ， 就 给 view 组 件 引 用 active 样式 (该 样式 在 
页 面 样式 文件 中 定义 ， 用 于 设 定 用 户 单 击 的 商品 分 类 名 称 的 显示 样式 ， 即 白色 背景 、 红 色 文 
字 效 果 )， 和 否则 不 引用 任何 样式 显示 商品 分 类 名 称 。 

上 述 代码 第 8~20 行 定义 了 右 侧 页 面 结构 。 第 8 行 代码 使 用 scroll-view 组 件 的 scroll-y 属 
性 指定 右 侧 页 面 可 以 垂直 滚动 、scroll-top 属性 用 于 指定 商品 分 类 跳 转 后 右 侧 页 面 回 到 顶部 
( 即 scrollTop 值 为 0); 第 10 行 代码 定义 了 右上 侧 商品 推荐 栏 用 image 组 件 显 示 所 推荐 商品 
的 图 片 ，class 属性 指定 了 商品 推荐 栏 的 样式 、src 属性 指定 了 推荐 商品 的 图 片 文 件 、mode 属 
性 指定 了 图 片 的 宽 高 完全 拉 伸 至 填 满 image 组 件 。 第 12~19 行 代码 定义 了 右 下 侧 商品 列表 
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栏 显示 的 页 面 结构 ， 第 13 行 代码 用 wx:for 控制 属性 绑 定 左 侧 选 定 的 商品 类 下 的 商品 数组 


CnavItems[curImdex].sub)， 第 14 行 代 码 用 navigator 组 件 指 定 当 单 击 某 商 品 时 转向 打 玫 


F 的 页 


面 ， 并 通过 页 面 参 数 传递 的 方式 将 当前 单 击 的 商品 i4、 商 品 icon 和 商品 name 传递 到 要 转向 


的 商品 详情 页 面 (detaiLwxml), 第 15 行 代码 用 image 组 件 显示 商品 图 片 , 第 16 行 代码 
组 件 显示 商品 名 称 。 
@ 页 面 样式 文件 代码 。 


/**index.WwxSs**/ 
/* 左 侧 商 品 分 类 栏 样式 */ 
-left-navbar { 
position: absolute; 
left: Opx; 
width: 25%; 
height: 100%; 
background-color: #eee; 
9 font-size: 15px; 


} 
11 “/* 左 侧 商品 分 类 栏 每 行内 容 样式 */ 
12 .left-navbar view { 
13 height: 80rpx; 
14 line-height: 80rpx; 
E53 text-align: center; 
EG 
17 “/#* 左 侧 商 品 分 类 选中 样式 */ 
18 .active { 
19 background-color: #fff; 


20 color: red; 

2 font-size: 17px; 
2 

23 “/* 右 侧 栏 样式 */ 

24 .right { 

2 position: absolute; 


26 right: Opx; 
又 了 width: 75%; 
28 height: 100%; 


} 
30 /* 左 上 侧 推荐 栏 样式 */ 
31 .img-banner { 
32 height: 200rpx; 
23 width: 100%; 


} 
35 “/* 右 下 侧 商品 列表 栏 样 式 */ 
36 goods=1ist { 
3 display: flex; 


38 flex-wrap: wrap; 
39 margin-top: 20rpx; 
40 } 


41 “/* 右 下 侧 商品 列表 栏 每 个 商品 展示 样式 */ 
42 -goods { 

43 width: 150rpx; 

44 font-size: 14px; 

45 margin: 15rpx; 


j text 
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46 text-align: center; 


47 1} 
48 “/* 右 下 侧 每 个 商品 展示 图 样式 */ 
49 .img { 


50 width: 150rpx; 

51 height: 150rpx; 

S20 

53 “/* 右 下 侧 每 个 商品 名 称 样式 */ 
54 .goods-title { 

55 ”/* 给 text 设 成 块 级 元 素 */ 
56 display: block; 

5 /* 设 置 文字 溢出 部 分 为 .. .*/ 


58 overflow: hidden; 
Ea white-space: nowrap; 
60 text-overflow: ellipsis; 
7 
(2) 首页 页 面 功 能 实现 。 
1 Page ({ 
Ed data: { 
3 navIitems: [{ 
4 se 
5 name: ' 美 食 '， 
6 topicon: '../images/tuijianmeishi.png'"， 
这 sub: [{ id: 1001, name: 1', icon: '../images/meb.png' }, 
8 { id: 1002, name: ' i2', icon: '../images/meb.png' }, 
9 { // 其 他 美食 类 商品 的 id、 名 称 及 图 片 ， 此 处 略 。}， 
10 { id: 1015，name: ' 饼 干 F', icon: '../images/meb.png' }] 
Eo }, 
12 1 
EE name: ' 美 妆 '， 
14 topicon: '../images/tuijianmeizhuang.png', 
15 sub: [{ id: 2001，name:' 洁 肤 液 '， 
16 icon:'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/file 1.jpg'}, 
17 {id: 2002，name:' 肌 底 液 '， 
18 icon:'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/file 2.jpg'}, 
19 { // 其 他 美 妆 类 商品 的 id、 名 称 及 图 片 ， 此 处 略 )}， 
20 {id: 2012, name: ' 护 肤 面 膜 '， 
21 icon: 'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/file 12.jpg'}] 
22 } 


区 { // 其 他 商品 分 类 的 id、 商 品 分 类 name 及 对 应 商品 的 ijd、name 和 icon 信息 ， 此 处 略 }] ， 
24 scrollTop: 0，// 用 作 跳 转 后 右 侧 商 品 展示 视图 回 到 项 部 
25 curNav: 0, // 对 应 样式 变化 

26 curIndex: 0，// 对 应 第 几 个 分 类 的 数据 

27 ]} 

28 Ws 

29 onLoad: function(options) { 

30 // 可 以 从 网 络 获 取 商 品 分 类 、 商 品 信息 

31 a 

32 /* 左 侧 商 品 分 类 列 单 击 事件 */ 

33 leftClick: function(e) { 

34 Var index = e.currentTarget .dataset.index; 

35 this.setData ({ 
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36 curNav: index, 
3% curIndex: index, 
38 scrollTop: 0, 
39 yy 

40 } 

4 


根据 首页 页 面 的 功能 需求 , 本 项 目 数 据 设计 的 结构 为 数组 嵌 套 数组 , 第 一 个 数组 navItems 
包含 商品 分 类 的 相关 信息 ， 该 数组 中 嵌 套 sub 数组 ， 包 含 该 商品 分 类 对 应 的 商品 信息 相关 数 
据 。 通 常 这 类 数据 应 该 由 后 台 网 站 平台 提供 调用 接口 ， 有 条 件 的 开发 者 可 以 使 用 第 三 方 平台 
提供 的 数据 接口 ， 也 可 以 自行 搭建 后 台 网 站 服务 器 ， 提 供 该 类 数据 的 接口 。 此 处 为 了 说 明 方 
便 ， 就 直接 在 页 面 逻 辑 代码 的 data 模块 中 初始 化 了 该 结构 类 型 的 数据 。 

上 述 代码 第 4-11 行 定 义 了 美食 类 商品 ， 包 含 类 编号 id， 类 名 称 name， 该 类 推荐 商品 图 
标 topicon 及 所 属 商 品 的 相关 信息 (商品 编号 id、 商 品名 称 name、 商 品 图 标 icon)， 此 处 的 图 
标 文件 都 事先 复制 到 了 images 文件 夹 中 ; 第 12~22 行 代码 定义 了 美 妆 类 商品 , 包含 内 容 与 美 
食 类 商品 一 样 ， 不 同 的 是 所 属 商 品 的 图 标 直 接 使 用 了 网 络 图 片 。 

上 述 代 码 第 29~31 行 的 onLoad( ) 方 法 通常 用 于 调用 网 络 接口 ， 以 获取 商品 分 类 和 商品 信 
息 的 相关 数据 ; 第 33~40 行 代码 定义 了 单 击 商品 分 类 事件 leftClick( )， 该 事件 用 回 闪 
于 将 单 击 的 商号 分 类 数组 下 标 传递 给 首页 页 面 ， 以 便 更 新 首页 页 面 的 相关 内 容 。 唾 

图 商品 详情 页 面 的 设计 与 实现 

ee 

从 图 4.31 可 以 看 出 ， 商 品 详情 页 面 主 要 包含 5 部 分 内 容 商品 图 片 轮 播 ”4.6.2.4 
显示 区 、 商 品 信 | 息 显示 区 、 et po 显示 区 、 商 品 详情 信息 显示 区 和 底部 悬浮 栏 。 
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图 4.31 购物 小 程序 (商品 详情 页 ) 


Q 页 面 结 构 文件 代码 。 
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入 <!--pages/detail/detail .wxml——> 

2 <! 一 -商品 图 片 轮 播 显示 -> 

3 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" 
interval="{{interval}}" duration="{{duration}}"> 

4 <block wzx:for="{{goods[goodsIndex] .imgUrls}}"> 

3 <swiper-item> 

6 <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"></image> 
7 </swiper-item> 

8 </block> 

9 </swiper> 

10 <!-- 商 品 信息 显示 --> 

11 <scroll-view scroll-y> 

12 ”<!-- 找 不 到 该 商品 --> 

13 <block wx:if="{{goodsIndex<0}}"> 

14 <image mode='aspectFit' src='../images/sorry.png'></image> 

15 </block> 

16 ”<!-- 找 到 该 商品 --> 

Ld <block wzx:else> 


18 <! 一 -显示 该 商品 的 名 称 、 价 格 和 可 购买 数量 --> 


a <view class="detail"> 

20 <view>{ {goods [goodsIndex] .name} }</view> 

2 <View style="color:red; font-size:35rpx;">¥{{goods[goodsIndex] .price} }</view> 
22 <view style='color:blue'> 可 购买 数量 : { {goods[goodsIndex] .total}}</view> 
23 </view> 

24 <!-- 该 商品 的 评价 信息 --> 

25 <view class="comments"> 

26 <text> 商 品评 价 </text> 

2 <view wx:for="{{goods[goodsIndex] .coments}}"> 

28 <text class="text-remark"> {{item}}</text> 

29 </view> 

30 </view> 

31 <!-- 该 商品 的 详细 信息 --> 

BE <View> 

33 <view style='padding-left:20rpx'> 商 品 详情 </view> 

34 <block wx:for-items="{{goods [goodsIndex] .detailImg}}"> 

3 <image class="image detail" src="{{item}}" /> 

36 </block> 

3 </view> 


38 </block> 

39 </scroll-view> 

40 <!-- 底部 悬浮 栏 --> 

41 <view class="detail-nav"> 


42 <! 一 -首页 链接 -> 


43 <view class='bottom-banner' bindtap="toIndex"> 

44 <image mode='scaleToFil1' src="../images/firstb.png" /> 
45 <view> 首 页 </view> 

46 </view> 

47 ”<!-- 分 隔 线 --> 

48 <View class="1ine nav"></view> 

49 ”<!-- 购 物 车 链接 --> 

50 <view class='bottom-banner' bindtap="toCart"> 

51 <image mode='scaleToFil1' src="../images/saleb.png" /> 
2 <view> 购 物 车 </view> 


S53 </view> 
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54 <!-- 分 隔 线 --> 


号 5 <View class="line nav"></view> 

56 ”<!-- 收 藏 状态 展示 --> 

57 <View class='bottom-banner' bindtap="addLike"> 

58 <image mode="'scaleToFill' src="{{goods[goodsIndex] .isHave? '../images/light.png': 
'../imges/black.png'}}" /> 

59 <view wx:if="{{goods[goodsIndex] .isHave}}"> 已 收藏 </view> 

60 <view wx:else> 收 藏 </view> 

61 </view> 


62 <!-- 按 钮 --> 

63 <button class="button-cart" bindtap="btnRdd"> 加 入 购物 车 </button> 
64 <button class="button-buy"”bindtap="btnBuy"> 立 即 购买 </button> 
65 </view> 


上 述 代 码 第 3~9 行使 用 swiper 组 件 和 swiper-item 组 件 实现 商品 图 片 的 轮 播 展示 , 其 中 第 
6 行 代码 绑 定 了 单 击 image 组 件 的 自 定义 方法 previewImage()， 用 于 调用 小 程序 框架 提供 的 
wx.previewImage( ) 方 法 在 新 页 面 中 全 屏 预览 图 片 。 第 11~39 行 代码 定义 了 商品 信息 显示 区 域 ， 
包括 商品 基本 信息 (名 称 、 价 格 、 可 购买 数量 )， 商 品评 价 信 息 和 商品 详细 信息 三 个 部 分 。 其 
中 第 13 行 和 第 17 行 分 别 使 用 wx: 让 和 wx:else 的 条 件 泻 染 语句 实现 : 如果 在 商品 详情 goods 
数组 中 找 不 到 首页 页 面 传递 来 的 商品 id， 就 会 在 商品 详情 页 面 直接 使 用 image 组 件 加 载 
sorrypng 图 片 (上述 第 14 行 代码 )， 和 否则 在 商品 详情 页 面 依次 显示 商品 名 称 、 商 品 价格 、 可 
购买 数量 、 商 品评 价 信息 和 商品 详情 信息 。 
上 述 代 码 第 41~65 行 定 义 了 页 面 底部 悬浮 栏 显示 效果 ， 从 左 到 右 分 别 是 “首页 ”“ 分 隔 

线 ”"“ 购 物 车 ” “分隔 线 ”“ 收 藏 "“ 加 入 购物 车 ”和 “立即 购买 ”。“ 首 页 ” 绑 定 了 自 定义 方法 
toIndex( )， 用 于 打开 首页 页 面 (index.wxml);“ 购 物 车 ” 绑 定 了 自 定义 方法 toCart( )， 用 于 打 
开 购 物 车 页 面 (cartwxml);“ 收 藏 ” 绑 定 了 自 定义 方法 addLike( )， 用 于 改变 收藏 状态 ， 并 可 
以 根据 收藏 状态 加 载 代表 不 同 状态 的 图 片 ;“ 加 入 购物 车 ” 绑 定 了 自 定义 方法 btnAdd( )， 用 
于 将 当前 商品 的 编号 、 名 称 、 价 格 、 可 购买 数量 等 存 入 全 局 变量 carts 数组 中 ， 以 便 在 购物 车 
页 面 展示 ;“ 立 即 购 买 ” 绑 定 了 自 定 义 方法 btmBuy()， 本 项 目 直接 用 wx.showToast( ) 方 法 显示 
“购买 成 功 ” 信 息 ， 读 者 可 以 根据 实际 项 目 需要 添加 相应 功能 模块 。 
@ 页 面 样式 文件 代码 。 
/* pages/detail/detail.wxss */ 
/* 轮 播 图 片 样式 */ 
swiper { 

height: 450rpx; 
ee image { 

width: 100%; 

height: 100%; 


Damum 必 wm 


|; 
10 “/* 商 品名 和 价格 区 样式 */ 
11 .detail { 
正字 margin: 10rpx; 


4 
14 “/* 商 品评 价 区 样式 */ 
15 .comments { 
16 margin: 10rpx; 
17 border: lpx solid #cfcccc; 


18 
19 
20 
21 
区 
23 
24 
25 
26 
27 
28 
29 
30 
3 
3Z 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
号 洒 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
这 


} 

/* 每 条 评价 的 样式 */ 

.text-remark { 
padding-bottom: Spx; 
display: block; 
font-size: 25rpx; 
margin: 10rpx; 


background: rgb (207, 204, 204); 


/* 底 部 悬浮 栏 样式 */ 
.detail-nav { 
display: flex; 
flex-direction: row; 
align-items: center; 
background-color: #f6f6f9; 
bottom: 0; 
position: fixed; 
z-index: 1; 
width: 100%; 
height: 120rpx; 


} 

/* 底 部 悬浮 栏 上 图 标 加 文字 区 样式 */ 

.bottom-banner { 
display: flex; 
flex-direction: column; 
align-items: center; 


: 

/x* 底 部 悬浮 栏 上 文字 样式 */ 

.bottom-banner view { 
line-height: 30rpx; 
font-size: 25rpx; 
padding-bottom: 15rpx; 


} 

/x* 底 部 悬浮 栏 上 图 片 样式 */ 

.detail-nav image { 
width: 50rpx; 
height: 50rpx; 
margin: 25rpx; 


} 
/* 底 部 悬浮 栏 上 分 隔 线 样式 */ 
.line nav { 
width: 5rpx; 
height: 100%; 
background-color: gainsboro; 
} 
/* 底 部 悬浮 栏 上 按钮 样式 */ 
button { 
color: white; 
text-align: center; 
display: inline-block; 
font-size: 30rpx; 
border-radius: Orpx; 
width: 50%; 
height: 100%; 
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2 line-height: 120rpx; 


1 
74 “/* 底 部 悬浮 栏 上 “加 入 购物 车 ”按钮 的 样式 */ 
75 -button-cart { 
76 background-color: #3e5f81; 


} 
78 “/* 底 部 悬浮 栏 上 “立即 购买 ”按钮 样式 */ 
79 .button-buy { 
80 background-color: rgb(138, 28, 28); 
BE 


上 述 代 码 第 28~38 行 定义 了 底部 悬浮 栏 样式 ， 其 中 第 33 行 代码 指 定 底部 悬浮 栏 距离 页 
面 底部 0px， 第 34 行 代码 指定 底部 悬浮 栏 位 置 锁定 ， 第 35 行 代码 指定 悬浮 栏 在 Z 轴 方 向 的 
堆 秋 顺序 。z-index 属性 用 于 指定 一 个 元 素 的 堆 琶 顺序 。 如 果 其 值 为 正 数 ， 值 越 大 表示 对 应 的 
元 素 越 在 上 面 一 层 ; 如 果 其 值 为 负数 ,表示 在 最 底层 ; 通常 当前 页 面 的 z-index 国 Re 
属性 值 为 0， 所 以 第 35 行 代码 设置 其 值 为 1， 就 可 以 将 底部 悬浮 栏 浮 在 当前 页 
的 上 面 。 

(2) 商品 详情 页 面 功能 实现 。 


@ 初始 化 数据 。 2 
全 data: { 
六 indicatorDots: true，// 是 否 显示 面板 指示 点 
3 autoplay: true, // 是 否 自动 切换 
4 interval: 3000, // 自 动 切换 时 间 间 隔 , 3s 
5 duration: 1000, // 滑 动 动画 时 长 1s 
6 goods: [{ // 商 品 数组 
思 id: 2001, // 商 品 编号 
8 name: ' 日 本 ALOVIVI 邱 妆 皇后 四 效 合 一 洁 肤 液 …,， // 商 品名 
9 price: 109, // 商 品 价格 
10 isHave: false, / /收藏 状态 
al total: 100， // 可 购买 数量 
er isBuy: false, // 已 加 购物 车 状态 
13 imgUrls: ['https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/ 


file 11.jpg', 'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/file 10 
.jpg', 'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/file 1.jpg'], 

// 商 品 轮 播 图 

14 comments:[ "商品 还 可 以 ! '，" 刚 刚 收 到 ， 还 没有 试用 '…，" 蛮 好 的 '] ， // 商 品评 价 

5 detailImg: ['https://pb-assets.azoyacdn.com/media/wysiwyg/ 
bigbrands/file 1.jpg', 'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/ 
file 2.jpg', 'https://pb-assets.azoyacdn.com/media/wysiwyg/bigbrands/ 


Fie // 商 品 详情 图 片 

16 Ez 

ny // 其 余 商品 数据 的 格式 与 第 11~19 行 类 似 ， 此 处 略 
18 }]， 


19 goodsIndex: -1，// 存 放 首页 传递 过 来 的 商品 id 在 商品 详情 页 商品 数组 中 的 对 应 下 标 
20 }, 

上 述 代码 第 2~5 行 用 于 定义 控制 swiper 组 件 显示 效果 的 变量 ;第 6~18 行 模拟 商品 数据 ， 
与 首页 初始 化 数据 类 似 ， 也 采用 数组 嵌 套 数组 的 JSON 格式 数据 结构 ， 数 组 goods 中 包含 商 
品 编号 、 商 品名 称 、 商 品 价格 、 收 藏 状态 、 可 购买 数量 、 已 加 购物 车 状态 、 商 品 轮 播 图 片 〈 用 
嵌 套 的 数组 imgUrls 存放 图 片 地 址 )、 商 品评 价 ( 用 嵌 套 的 数组 comments 存放 ) 及 商品 详情 
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图 片 〈 用 嵌 套 的 数组 detailImg 存放 )。 
@ 页 面 加 载 代码 。 


1 onLoad: function (options) 1 

覃 for (var i = 0; i < this.data.goods.length; i++) { 
可 if (parseInt (options.id) == this.data.goods[i].id) { 
4 this.data.goodsIndex = i; 

各: break; 

6 } 

2 } 

8 this.setData({ 

9 icon: options.icon, 

10 goodsIndex: this.data.goodsIndex 

二 3 

12 }, 


商品 详情 页 面 加 载 时 ， 首 先 获取 首页 页 面 传递 过 来 的 参数 值 id (商品 编号 )， 然 后 根据 
商品 id 判断 在 goods 数组 中 是 否 存 在 该 id， 如 果 存 在 ， 就 将 goods 数组 的 下 标 值 赋值 给 
goodsIndex， 以 便 在 商品 详情 页 面 展示 该 商品 的 所 有 信息 。 

。 单 击 轮 播 图 片 事 件 ( 预 览 图 片 》 代 码 。 


previewImage: function (e) 1 
var index = this.data.goodsIndex 
Var current = e.target .dataset.src 
wx.previewImage ({ 
current: current，// 当 前 显示 图 片 的 http 链接 
urls: this.data.goods [index] .imgUrls // 需 要 预览 的 图 片 http 链接 列表 
}) 
}, 


。 单 击 悬 浮 栏 首页 事件 《〈 跳 转 到 首页 ) 代码 。 


toIndex: function (e) { 
WwWX.SwitchTab ({ 
url: '/pages/index/index'" 
}) 
}, 


。 单 击 悬 浮 栏 购物 车 事件 〈 跳 转 到 购物 车 ) 代码 。 


toCart: function (e) { 
WwWX.SwitchTab ({ 
url: '/pages/cart/cart" 
}) 


wa wm 


ao 必 mw 


ao 性 


。 单 击 悬浮 栏 收藏 事件 代码 。 


adqdLike: function ( ) { 
Var index = this.data.goodsIndex 4.6.2.6 
var isHave = this.data.goods[index] .isHave // 获 取 原 收藏 状态 
this.data.goods[index] .isHave = !isHave 
this.setDatal({ 
goods: this.data.goods 
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7 1); 
8 } 


。 单 击 加 入 购物 车 按钮 事件 代码 。 


1 btnAdd: function (e) { 

2 Var index = this.data.goodsIndex 

号 var isBuy = this.data.goods[index] .isBuy // 获 取 原 加 入 购物 车 状态 
4 if (isBuy) { 

5 wx.SshowToast ({ 

6 title: "已 加 入 购物 车 '， 

池 icon: "success'v 

8 duration: 2000 

3 1D); 

10 } else { 

EE this.data.goods[index] .isBuy = !isBuy 

12 app.globalData.carts.push({ 

13 yiId: this.data.goods [index] .id, // 已 购 商 品 编号 

14 yiName: this.data.goods[index] .name, // 已 购 商品 名 称 

15 yiPrice: this.data.goods[index] .price, // 已 购 商品 价格 

16 yiTotal: this.data.goods [index] .total， // 已 购 商 品 可 卖 数量 
17 yiBuy:0, // 已 购买 商品 数量 
18 yiIcon: this.data.goods[index] .imgUrls[0],// 已 购 商 品 的 图 标 
19 yiSselected:false // 已 购 商 品 选中 状态 
20 总 区 

之 让 } 

de this.setData ({ 

23 goods: this.data.goods 

24 }) 

25 }, 


imgUrls 在 单 击 “ 加 入 购物 车 ”按钮 时 首先 判断 购物 车 中 是 否 有 当前 商品 ， 如 果 有 该 商 
品 ， 就 使 用 wx. showToast( ) 方 法 显示 提示 信息 ， 如 果 没 有 该 商品 ， 就 修改 isBuy， 并 将 该 商 
品 的 信息 (包含 商品 编号 、 商 品名 称 、 商 品 价格 、 可 卖 数 量 和 商品 图 标 地 址 ) 加 入 代表 购物 
车 的 数组 carts 中 ， 以 便 在 购物 车 页 面 显 示 这 些 数据 。 但 是 由 于 商品 详情 页 面 和 购物 车 页 面 都 
需要 使 用 carts， 上 述 代 码 第 12 行使 用 app.globalData.carts 引用 全 局 变量 carts, 所 以 本 项 目 需 
要 将 carts 定义 为 小 程序 的 全 局 变量 ， 即 在 本 项 目的 appjjs 文件 中 用 如 下 格式 定义 : 


和 //app.js 

2 app({ 

onLaunch: function ( ) { 
a }, 

5 globalData: { 

6 carts: [] // 购 物 车 数组 
滑 } 

8 1) 


为 了 保证 能 正确 引用 第 6 行 定义 的 全 局 变量 carts, 还 需要 在 商品 详情 页 面 的 逻辑 代码 最 
前 面 添 加 如 下 代码 : 


1 var app = getApp( ) 


。 单 击 立 即 购买 按钮 事件 代码 。 
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btnBuy: function (e) { 
WwWKX.ShowToast ({ 
title: "购买 成 功 '， 
icon: "success'y 
duration: 2000 
ps 
}, 


。 商品 详细 页 面 逻辑 文件 代码 。 


// pages/detail/detail.js 
Var app = getApp( ) 
Page ({ 

/* 初 始 化 数据 。 */ 
/* 页 面 加 载 代码 */ 
/* 预 览 图 片 4 
/* 跳 转 到 首页 */ 
/* 跳 转 到 购物 车 */ 
3 /x* 收 藏 a 
10 ”/* 加 入 购物 车 */ 
11 /购买 商品 2 
12 


购物 车 页 面 的 设计 与 实现 

(1) 购物 界面 设计 。 

从 图 4.32 可 以 看 出 , 购物 车 页 面 从 上 向 下 包含 购物 车 商品 展示 区 和 底部 操 
作 栏 ， 其 中 购物 车 商品 展示 区 用 于 展示 商品 名 称 、 商 品 图 片 、 商 品 价格 、 单 选 高 
图 标 及 对 购物 车 内 商品 进行 操作 的 工具 (数量 显示 、 增 加 和 减少 及 商品 删除 )。 

Q@ 页 面 结构 文件 代码 。 


aawmmwmn 


”购物 车 商品 名 称 、 
购物 车 商品 展示 区 一 一 价格 显示 区 
Ec 一 
| 一 购物 车 商品 操作 区 


日 本 ALOVIVI 印 妆 。 羊 109 
皇后 四 效 合 一 法 肤 
0 + 删除 


底部 操作 栏 | 甩 
[一 一 


E 和 有 
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h <!--pages/cart/cart .wxml——> 

2 <!-- 购 物 车 中 没有 商品 --> 

3 <View wzx:if="{{goodsTotal==0}}" class="cart-no-data"> 

4 购物 车 空 的 ， 尽 快 去 购物 吧 !: ) 

和 </view> 

6 “<!-- 购 物 车 中 有 商品 --> 

7 <view wx:else> 

8 <view class="cart-box"> 

9 <!-- wx:for 演 染 购物 车 列表 --> 

10 <view class="'cart-list' wx:for="{{buyGoods}}" wx:key="{{index}}"> 
1 <!-- wx:if 是 否 选择 显示 不 同 图 标 --> 

2 <icon wx:if="{{item.yiSelected}}" class='cart-pro-select' type= 
"success" color="red" bindtap="selectGoods" data-index="{{index}}" /> 
413 <icon wx:else type="circle" class='cart-pro-select' bindtap= 
"selectGoods" data-index="{{index}}" /> 

14 <!-- 点 击 商品 图 片 可 跳 转 到 商品 详情 --> 

I <navigator url="/pages/detail/detail?id={ {item.yiId}}"> 

16 <image class="cart-thumb" src="{{item.yiIcon}}"></image> 

1 </navigator> 

18 <View class='cart-name-box'> 

19 <text class='cart-pro-name'>{{item.yiName}}</text> 

20 <text class='cart-pro-price'>¥{{item.yiPrice}}</text> 

2 </view> 

22 <!-- 增加 、 减 少数 量 按钮 删除 按钮 --> 

23 <View class='cart-count-box'> 

24 <text class='cart-count-down' bindtap="decCount" 
data-index="{{index}}">—</text> 

2 <text class='cart-count-num'>{{item.yiBuy}}</text> 

26 <text class='cart-count-add' bindtap="addCount" data-index= 
"{{index}}">+</text> 

2 <text class='cart-del' bindtap="deleteGoods" data-index="{ {index}}"> 
删除 </text> 

28 </view> 

2 </view> 


30 </view> 


31 <!-- 底部 操作 栏 --> 


32 <view class='cart-footer'> 

33 <!-- wx:if 是 否 全 选 不 同 图 标 显示 --> 

34 <icon wx:if="{{selectAllstatus}}" class='total-select' type="success 
circle" color="#fff" bindtap="selectAll" /> 

35; <icon wx:else class='total-select' type="circle" color="#fff" bindtap= 
"selectAll" /> 

36 <text class='total-price-text'> 全 选 </text> 

3 Sh J 

38 <text class='total-price'> 总 价 : ¥{{sumPrice}}</text> 

对 娄 <button class="button-red" bindtap="toBuy" > 去 结算 </button> 

40 </view> 


41 </view> 


上 述 代码 第 8-30 行 定义 了 购物 车 内 商品 展示 区 的 每 行 显示 效果 ,其 中 第 12~13 行 用 icon 
组 件 实现 商品 列表 左 侧 的 单 选 按钮 ; 第 15~17 行 用 navigator 组 件 实现 单 击 购物 车 页 面 的 商品 
图 片 跳 转 到 商品 详情 页 面 ， 使 用 text 组 件 实现 商品 名 称 、 商 品 价格 、 商 品 数量 、“+”( 数 量 
增加 )、“-”( 数 量 减少 )、 删 除 等 显示 。 


全 选 按 钮 , 使 用 text 组 件 显示 “全 选 ”“ 总 价 ” 使 用 button 组 件 实现 “去 结算 ” 


按钮 。 


PPOoOoOJAMAGODNe 
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@ 页 面 样式 文件 代码 。 


/* pages/cart/cart.wxss */ 
/* 购物 车 没有 商品 样式 */ 
.cart-no-data { 
padding: 40rpx 0; 
color: #999; 
text-align: center; 
} 
.Cart-box { 
padding-bottom: 100rpx; 
} 
.cart-list { 
position: relative; 
padding: 20rpx 20rpx 20rpx 285rpx; 
height: 185rpx; 
border-bottom: lrpx solid #e9e9e9; 
} 
/* 左 侧 按钮 样式 */ 
.Cart-pro-select { 
position: absolute; 
left: 20rpx; 
top: 90rpx; 
width: 45rpx; 
height: 45rpx; 


} 

/* 商品 图 片 样式 */ 

.cart-thumb { 
position: absolute; 
left: 85rpx; 
width: 185rpx; 
height: 185rpx; 

} 

.Cart-name-box { 
width: 450rpx; 
height: 100rpx; 


} 
/* 购物 车 中 商品 名 称 的 样式 */ 
.Cart-pro-name { 
display: inline-block; 
width: 300rpx; 
overflow: hidden; 
} 
/* 购物 车 中 商品 价格 的 样式 */ 
.cart-pro-price { 
float: right; 
height: 50rpx; 
color: red; 
} 
-Cart=count—box f{ 
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49 width: 450rpx; 

50 height: 80rpx; 

SL 

52 .cart-count-box text { 

53 display: inline-block; 

54 line-height: 80rpx; 

5 text-align: center; 

56 于 

57 “/* 购物 车 中 增加 商品 +、 减 少 商品 -的 样式 */ 
58 .cart-count-down, .cart-count-add { 
59 font-size: 35rpx; 

60 width: 50rpx; 

61 height: 100%; 

2 

63 “/* 购物 车 所 购 商 品 数 量 的 样式 */ 

64 .cart-count-num { 

65 width: 150rpx; 

属相 

67 “/* 购物 车 所 购 商 品 删除 功能 的 样式 */ 
68 .cart-del { 

69 float: right; 

70 color: red; 

Eh 

72 /* 底部 操作 栏 样 式 */ 


73 .cart-footer { 


74 position: fixed; 
75 display: flex; 
76 flex-direction: row; 


到 bottom: 0; 

78 width: 100%; 

79 height: 120rpx; 

80 line-height: 120rpx; 

81 background: #3e5f8]1; 

82 COloE 2 #£f£ES 

SS 二 

84 /* 底部 操作 栏 “去 结算 ”按钮 的 样式 */ 
85 .button-red { 


86 position: fixed; 

87 Pgh OF 

88 color: white; 

89 font-size: 30rpx; 
90 border-radius: Orpx; 


91 width: 30%; 

92 line-height: 120rpx; 

53 background-color: #f£f44336; 
94 } 

95 /* 底部 操作 栏 “全 选 ”按钮 的 样式 */ 
96 .total-select { 

97 position: absolute; 

98 left: 20rpx; 

99 top: 15rpx; 

100 width: 30rpx; 

101 height: 30rpx; 

i102 “font size: 30rpxs; 


103 
104 
105 
106 
107 
108 
109 
110 
EE 
12 
113 
114 
115 
116 
LE 
118 
119 


ao wm 


1 
2 
3 
4 
5 
6 
7 


ownamuw 必 wm 


oo 
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1 
/* 底部 操作 栏 “全 选 ”文字 的 样式 */ 
.total-price-text { 
position: absolute; 
left: 85rpx; 
top: lrpx; 
height: 30rpx; 
font-size: 30rpx; 
} 
/* 底部 操作 栏 “ 总 价 ” 及 “总 价值 ”文字 的 样式 */ 
.total-price { 
position: absolute; 
left: 200rpx; 
top: lrpx; 
height: 30rpx; 
font-size: 30rpx; 
} 


(2) 购物 车 页 面 功能 实现 。 


@ 初始 化 数据 。 
data: { 
goodsTotal: 0, // 购 物 车 内 商品 种 类 数 
buyGoods: [], // 购 物 车 内 商品 信息 
sumPrice: 0, // 购 物 车 商品 总 价 


selectAllstatus: false，// 是 否 全 选 购物 车 商品 
}， 


基本 组 件 用 后 


上 述 代 码 第 3 行 定义 的 buyGoods 数 组 用 于 获取 appjs 文 件 中 定义 的 全 局 变量 carts 数组 ， 

carts 数组 的 内 容 由 商品 详情 页 执行 “加 入 购物 车 ”操作 后 存 入 。 由 于 这 个 数组 的 内 容 需 要 在 
购物 车 页 面 切换 时 加 载 ， 所 以 需要 在 购物 车 页 面 显示 事件 中 将 全 局 变量 carts 加 载 到 该 页 面 。 
其 代码 如 下 : 


onShow: function ( ) { 
var len = app.globalData.carts.length 
this.setData ({ 
goodsTotal: len, 
buyGoods: app.globalData.carts 
}) 
}, 


@ 自 定义 计算 购物 车 中 所 选 商品 总 价 getSumPrice( ) 方 法 。 


getSumPrice: function ( ) 1{ 


let buyGoods = this.data.buyGoods; // 获 取 购 物 车 中 所 有 商品 
let sum = 0; 
for (let i = 0; i < buyGoods.length; i++) { 

if (buyGoods[i] .yiselected) { // 判 断 选 中 才 会 计算 价格 


sum += buyGoods[i] .yiBuy * buyGoods [i] .yiPrice; // 所 有 价格 加 起 来 
} 
} 
this.setDatal({ 
buyGoods: buyGoods, 
sumPrice: sum.toFixed(2) 
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上 述 第 4-8 行 代码 实现 了 对 购物 车 


每 件 商品 进行 判断 ， 如 果 该 商品 已 经 选 


Ph， 则 将 该 


商品 的 购买 数量 乘 以 该 商品 的 单位 ， 并 进行 累加 ， 以 便 计算 出 购物 车 页 面 上 所 有 选中 商品 的 


总 价值 。 
@ 单 击 购物 车 每 行商 品 左 侧 的 单 选 


按钮 事件 代码 。 


下 selectGoods: function (e) { 
2 const index = e.currentTarget .dataset.index; // 获 取 data- 传 进来 的 index 
3 let buyGoods = this.data.buyGoods; 
4 const selected = buyGoods [index] .yiSelected; // 获 取 当 前 商品 的 选中 状态 
5 buyGoods [index] .Yiselected = !selected; // 改 变 状态 
6 this.setData({ 
buyGoods : buyGoods 
8 Hs 
9 this.getSumPrice( ); // 重 新 获取 总 价 
10 }, 
@ 单 击 “+”( 增 加 购买 数量 ) 事件 代码 。 
br addCount: function (e) { 
2 const index = e.currentTarget.dataset.index; 
8 let buyGoods = this.data.buyGoods; 
4 let yiBuy = buyGoods [indqex] .yiBuy; 
| if (yiBuy < buyGoods[index] .yiTotal) { 
6 yiBuy = yiBuy + 1; 
经 } else { 
8 wx.showToast ({ 
9 title:“' 已 实 光 ! '， 
10 }) 
11 return false; 
过 } 
E3 buyGoods [index] .yiBuy = yiBuy; 
14 this.setData({ 
LS buyGoods: buyGoods 
16 1); 
7 this.getSumPrice( ); // 重 新 获取 总 价 
18 ]}， 


上 述 代码 第 6~13 行 表 示 ， 如 果 单 击 “+” 增加 购买 数量 1 后 的 值 大 于 该 


商品 的 可 卖 数量 ， 则 使 用 wx.showToast( 


单 击 “-”( 减 少 购买 数量 ) 事件 代码 与 此 代码 类 似 ， 不 再 獒 述 。 读 者 可 以 参阅 


代码 包 lesson4 sale 文件 夹 中 的 内 容 。 
@ 单 击 “ 删 除 ” 事 件 代 码 。 


deleteGoods: function (e) { 


buyGoods .splice (index, 1); 
this -setData({ 

buyGoods: buyGoods 
1 


auw 必 wmN 


) 显 示 “ 已 卖 光 ” 否则 购买 数量 加 1。 


const index = e.currentTarget.dataset.index; 
let buyGoods = this.data.buyGoods; 


// 删 除 购物 车 列表 里 这 个 商品 


前 第 4 章 基本 组 件 
8 if (!buyGoods .length) { // 如 果 购 物 车 为 空 
9 this .setData({ 
10 goodsTotal: 0 // 修 改 标识 为 0， 显示 购物 车 为 空 页 面 
了 ]) 
12 } else { // 如 果 不 为 空 
13 this .getSumPrice( ); // 重 新 计算 总 价格 
14 } 
15 }, 


上 述 代码 第 4 行 表示 在 buyGoods 数组 中 ,从 index 下 标 开始 删除 1 个 数组 元 素 , 也 就 是 
从 购物 车 商品 数组 中 删除 1 个 商品 。 如 果 删 除 1 个 商品 后 购物 车 商品 数组 为 定 ， 则 在 购物 车 
页 面 显 示 “ 购 物 车 空 滴 ， 尽 快 去 购物 吧 !: )” 其 中 ，array.splice( ) 方 法 的 功能 为 ， 向 array 数 
组 添加 元 素 或 从 array 数组 中 删除 元 素 ， 该 方法 在 JavaScript 中 有 详细 介绍 ， 读 者 可 以 自行 查 
阅 相 关 资 料 。 

@ 单 击 “全 选 ” 按 钮 事件 代码 。 


正 selectAll: function (e) { 

2 var selectAllstatus = !this.data.selectAllstatus; // 是 否 全 选 快 态 
3 let buyGoods = this.data.buyGoods; 

4 for (let i = 0; i < buyGoods.length; i++) { 

5 buyGoods [i] .yiselected = selectAllstatus; // 改 变 所 有 商品 已 选 状态 
6 | 

也 this.setData ({ 

8 selectAllstatus: selectAllstatus, 

9 buyGoods: buyGoods 

10 Ws 

1 this.getSumPrice( ); // 重 新 获取 总 价 
12 }, 


上 述 代码 第 4-6 行 表示 对 buyGoods 数组 中 每 个 元 素 的 已 选 状态 变量 yiSelected 重新 赋值 ， 
即 如 果 原 来 已 选 状态 为 f@lse， 则 赋值 为 tue; 如 果 原 来 已 选 状态 为 tue， 则 赋值 为 false。 

人 单 击 “ 去 结算 ”事件 代码 。 

“去 结算 ”按钮 的 功能 是 将 在 购物 车 页 面 选中 的 商品 信息 加 入 “个 人 中 心 ”页 面 的 “我 
的 订单 ”栏目 显示 ， 如 图 4.33 所 示 ， 所 以 此 功能 也 会 在 购物 车 页 面 到 个 人 中 心 页 面 进行 数据 
传递 。 为 了 解决 这 一 问题 ， 同 样 需 要 在 本 项 目的 appjs 文件 中 定义 全 局 变量 orders 数组 ， 用 
于 存放 订单 信息 ， 代 码 如 下 : 


1 //app.js 

2 RaApp({ 

3 onLaunch: function ( ) { 
他 ]， 

5 globalData: { 

6 carts: [],// 购 物 车 内 商品 
7 orders:[] // 订 单 信息 

8 } 

9 3) 


orders 数组 中 包含 订单 编号 (orderId)、 订 单价 值 小 计 (yiSum》 及 订单 包含 的 商品 信息 
(yiGoods)， 商 品 信息 (yiGoods) 也 是 用 数组 存放 了 商品 编号 、 商 品名 称 、 商 品 价格 、 商 品 
购买 数量 和 商品 图 片 等 信息 。 然 后 在 购物 车 页 面 的 “去 结算 ”处 绑 定 自 定义 的 toBuy( ) 方 法 ， 
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产生 随机 订单 号 ， 并 将 购物 车 页 面 上 选择 的 商品 加 入 存放 订单 信息 的 orders 数组 中 。 详 细 代 


码 如 下 : 

1 toBuy:function(e){ 

2 var yiGoods =[]; // 已 购 商品 数组 

3 et ordorid = mm // 订 单 号 

4 for (var i = 0; i < 6; i++) /1/6 位 随机 数 ， 用 以 加 在 时 间 戳 后 面 

5 { 

6 orderId += Math.floor (Math.random( ) * 10) 7 

7 } 

8 orderId = new Date( ).getTime( ) + orderId; // 时 间 鹤 + 随 机 数 生成 订单 号 
9 let buyGoods = this.data.buyGoods; // 获 取 购 物 车 商品 列表 

10 let YiSum = 0; 

11 for (let i = 0; i < buyGoods.length; i++) { 

2 if (buyGoods[i].yiselected) { // 判 断 选 中 才 会 加 入 订单 

he yiGoods.push({ 

14 yiId: buyGoods [i] .yird, // 已 购 商 品 编号 

5 yiName: buyGoods [i] .yiName, // 已 购 商 品名 称 

16 yiPrice: buyGoods [i] .yiPrice， // 已 购 商 品 价格 

7 yiBuy: buyGoods [i] .yiBuy， // 已 购 商 品 数量 

18 yiIcon: buyGoods [i] .yiIcon, // 已 购 商 品 的 图 标 

19 ]) 

20 yisum = yisum + buyGoods [i] .yiBuy * buyGoods [i] .yiPrice// 己 购 商 品 价值 小 计 
2 } 

实 沁 } 

23 app.globalData.orders.push({ orderId: orderId, yiSum:yiSum, yiGoods: yiGoods}) 
24 wx.switchTab ({ 

25 url: '/pages/me/me' // 转 到 个 人 中 心 页 面 

26 }) 

27 }， 


上 述 代码 第 4-8 行 用 于 产生 由 时 间 戳 和 6 位 随机 数 产生 的 订单 号 ;第 11~22 行 代码 用 于 
将 购物 车 页 面 的 选中 商品 信息 《商品 编号 、 商 品名 称 、 商 品 价格 、 购 买 数量 、 商 品 图 标 ) 在 
入 yiGoods 数组 , 其 中 第 20 行 代码 根据 选中 商品 的 数量 和 单价 累计 算出 该 订单 的 商品 价值 小 
计 值 ; 第 23 行 代码 将 订单 号 、 选 中 商品 及 商品 价值 小 计 存 入 orders 全 局 变量 ， 以 便 在 “个 人 
中 心 ” 页 面 的 “我 的 订单 ” 栏 中 调用 。 

@ 购物 车 页 面 逻 辑 文件 代码 。 


/* 计 算 购 物 车 所 选 商品 总 价 代码 SX 
/* 每 行商 品 左 侧 单 选 按钮 事件 代码 */ 
/* 增 加 购买 数量 代码 Ea 
9 /* 减 少 购买 数量 代码 2 
10 。 /* 删 除 购物 车 商品 代码 */ 
11 ”/* 底 部 结算 栏 全 选 按钮 事件 代码 7 
i: /* 去 结算 事件 代码 2 


1 //pages/cart/cart.js 

2 var app = getapp( ) 

3 Page ({ 

4 /* 初 始 化 数据 */ 

5 /* 购 物 车 页 面 显示 事件 代码 3 
6 

T 

8 


展示 区 两 个 部 分 ， 其 中 页 面 头 部 区 的 左 侧 展现 当前 登录 用 户 的 微 信 名 和 微 信 
头像 ， 右 侧 放置 一 个 二 维 码 图 标 ， 单 击 该 图 标 可 以 展现 登录 用 户 的 二 维 码 信 
息 ; 
文本 提示 、 订 单 编号 及 该 订单 下 包含 所 购 商品 的 相关 信息 和 付款 按钮 ， 订 单 


区 第 4 章 基本 组 件 


图 个 人 中 心 页 面 的 设计 与 实现 
(1) 个 人 中 心 界面 设计 。 
图 4.33 所 示 为 个 人 中 心 页 面 ， 主 要 包含 个 人 中 心 页 面 头 部 区 和 订单 信息 ” 国 狼 部委 


订单 信息 展示 区 是 本 页 面 设计 的 主要 部 分 ， 从 上 到 下 依次 为 “我 的 订单 ” 


4.6.2.10 


信息 是 购物 车 页 面 传递 过 来 的 全 局 变量 orders 数组 。 另 外 ,“ 个 人 信息 管理 ” 行 的 显示 效果 主 


要 用 样式 代码 进行 定义 。 


ovwaum 必 wm 


个 人 中 心 页 面 头 部 区 


订单 信息 展示 区 


和 日 二 ALOVIVI 术 皇后 四 效 合 一 党 让 
得 价 : 109 , 数量- 1 小 计 : ¥109 


-- a 


ES 


图 4.33 ”购物 小 程序 (个 人 中 心 页 ) 
Q 页 面 结构 文件 代码 。 


<!--pages/me/me .wxml--> 
<view> 
<!-- 页 面 头 部 区 --> 
<view class="header"> 
<image src="{{thumb}}" class="thumb"></image> 
<text class="nickname">{{nickname}}</text> 
<image class="code" src="../images/code.png"></image> 
</view> 
<!1==- 个 人 信息 管理 行 ==> 
<view class="info-box"> 
<navigator url="/pages/setup/setup"> 个 人 信息 管理 </navigator> 
</view> 
<!-- 我 的 订单 详情 区 --> 
<View class="orders-box"> 
<view class="orders"> 我 的 订单 </view> 
<! 一 -列表 泻 染 订 单 --> 


<view class="orders-list" wx:for="{{orders}}" wzx:key="index"> 
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18 <view class="orders-number"> 订 单 编号 : {{item.orderId}}</view> 

19 <!-- 列 表演 染 订单 中 的 商品 --> 

20 <View class="orders-detail" wx:for="{{item.yiGoods}}" wzx:kKey="index"> 
3 <image src="{{item.yiIcon}}"></image> 

要 <view>{{item.yiName}}</view> 

23 <view style='color: #3e5f81'> 单 价 : { {item.yiPrice}}, 数 量 : { {item.yiBuy}}， 
小 计 : 耻 {{item.yiPrice*item.yiBuy} .</view> 

24 </view> 

25 <!-- 订 单 信息 后 付款 行 --> 

26 <View class="orders-footer"> 

2 <text style='color:red'> 实 付 : 对 {{item.yisum}; </text> 

28 <button size="mini" class="orders-btn" bindtap="payorders"> 付 款 </button> 

2 </view> 

30 </view> 


31 </view> 
32 </view> 


上 述 代 码 第 4-8 行 定义 了 页 面 头 部 的 显示 效果 ， 分 别 使 用 image 组 件 显示 登录 用 户 的 微 

信 头 像 (功能 代码 直接 获取 登录 用 户 微 信 头像 ) 和 二 维 码 图 标 (保存 在 images 。 回 ; 
文件 夹 中 )， 使 用 text 组 件 显 示 登 录用 户 的 微 信 名 ; 第 10~12 行 代码 定义 了 
个 人 信息 管理 行 的 显示 效果 ， 并 使 用 navigator 组 件 实现 单 击 该 行 跳 转 到 个 
人 信息 管理 页 面 , 个 人 信息 管理 页 面 与 本 章 第 4 节 信 息 登 记 界面 的 设计 与 实 
现 类 似 ,本 节 不 再 重复 介绍 。 第 17~24 行 代码 是 本 页 面 的 设计 核心 ， 需要 使 
用 婴 套 列表 演 染 展示 订单 编号 及 该 订单 下 包含 的 商品 信息 ,其 中 第 23 行 分 别 显示 该 订单 下 商 
品 的 单价 、 数 量 及 小 计 (单价 X 数 量 )。 第 26~29 行 代码 定义 了 付款 行 的 显示 效果 ， 用 text 
组 件 显示 该 订单 应 付款 额 ， 用 button 组 件 绑 定 自 定义 payOrders( ) 方 法 实现 模拟 付款 。 
@ 页 面 样式 文件 代码 。 
/* pages/me/me.wxss */ 
/* 头 部 区 样式 */ 
.header { 

position: relative; 

height: 100rpx; 

line-height: 100rpx; 

padding: 30rpx 30rpx 30rpx 150rpx; 

background: #3e5f81; 
9 font-size: 28rpx; 
10 color: #fff; 


DamawmwwN 


} 
12 /* 头 部 区 头像 样式 */ 
13 .header .thumb { 
14 position: absolute; 
7 left: 30rpx; 
16 top: 30rpx; 
LE width: 100rpx; 
18 height: 100rpx; 
19 border-radius: 50%; 


} 
21  /* 头 部 区 二 维 码 图 标 样式 */ 
22 .header .code { 
23 position: absolute; 
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SE 
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53 
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right: 30rpx; 
top: 50rpx; 
width: 60rpx; 
height: 60rpx; 


} 
/* 个 人 信息 管理 行 样式 */ 
.info-box { 
position: relative; 
border-bottom: 20rpx solid #ededed; 
color: #999; 
line-height: 90rpx; 
font-size: 28rpx; 


} 
/* 个 人 信息 管理 行 后 面 >> 的 样式 */ 
.info-box: :after { 
position: absolute; 
right: 30rpx; 
top: 34rpx; 
content: ''; 
width: 16rpx; 
height: 16rpx; 
border-top: 4rpx solid #7f7f7f; 
border-right: 4rpx solid #7f7f7f; 
-webkit-transform: rotate (45deg); 
transform: rotate (45deg); 


3 

/* 订单 信息 展示 区 样式 */ 

.Orders-box { 
color: #999; 
font-size: 28rpx; 


} 
/* 订单 信息 展示 区 我 的 订单 文本 样式 */ 
.Orders { 
height: 90rpx; 
line-height: 90rpx; 
border-bottom: lrpx solid #e9e9e9; 
text-align: center; 


} 
/* 订单 信息 展示 区 订单 列表 样式 */ 
.orders-list { 
padding-left: 30rpx; 
border-bottom: 20rpx solid #ededed; 


} 
/* 订单 信息 展示 区 订单 编号 样式 */ 
.orders-number { 

height: 90rpx; 

line-height: 90rpx; 

border-bottom: lrpx solid #e9e9e9; 


} 
/* 订单 信息 展示 区 订单 详情 样式 */ 
.orders-detail { 

position: relative; 

height: 120rpx; 

padding: 35rpx 20rpx 35rpx 170rpx; 
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78 border-bottom: lrpx solid #e9e9e9; 


; 
80 /* 订单 信息 展示 区 订单 详情 中 商品 图 片 样式 */ 
81 .orders-detail image { 
82 position: absolute; 
83 left: 0; 
84 top: 20rpx; 
85 width: 150rpx; 
86 height: 150rpx; 


} 
88 /* 订单 信息 展示 区 订单 详情 中 商品 名 称 、 单 价 、 购 买 数量 样式 */ 
89 .orders-detail view { 
90 line-height: 60rpx; 


} 
92 /* 订单 信息 展示 区 付款 行 样式 */ 
93 .orders-footer { 
94 height: 60rpx; 
95 line-height: 60rpx; 
96 color: #2f2f2f; 
97 padding: 15rpx 30rpx 15rpx 0; 


} 
99 /* 订单 信息 展示 区 付款 行 付款 按钮 样式 */ 
100 .orders-footer .orders-btn { 
E00 float: right;s 
L102 width: 170rpx> 
103 height: 60rpx; 
104 line-height: 60rpx; 
105 border-radius: 6rpx; 
106 background: #b42f2d; 
E07 ‘Golor: #fff? 


上 述 代码 第 38~49 行 用 after 伪 元 素 定义 在 info-box 样式 后 插入 该 伪 元 
素 ， 此 处 就 是 在 页 面 的 “个 人 信息 管理 ” 行 后 面 插入 由 第 38~49 行 定义 的 
伪 元 素 ， 其 中 第 45~46 行 定义 了 一 个 矩形 的 上 边框 和 右边 框 ， 由 第 47~48 
行 定义 的 顺 时 针 放 置 45 度 角 就 呈现 出 页 面 上 的 “> ”符号 。 关 于 after before 
伪 元 素 的 介绍 ， 读 者 可 以 参考 CSS 的 内 容 。 

(2) 个 人 中 心 页 面 功能 实现 。 


@ 初始 化 数据 。 
Ls data: { 
2 thumbe vn // 存 放 微 信 头 像 
3 nickname: ' 7， // 存 放 微 信 和 名 
4 Graders= IT // 存 放 订 单 信息 
5 | 


上 述 代 码 第 3 行 定义 的 orders 数组 用 于 获取 appjs 文件 中 定义 的 全 局 变量 orders 数组 ， 
orders 数组 的 内 容 由 购物 车 页 执行 “去 结算 ”操作 后 存 入 。 由 于 这 个 数组 的 内 容 需要 在 个 人 
中 心 页 面 切换 时 加 载 ,所 以 需要 在 个 人 中 心 页 面 显 示 事 件 中 将 全 局 变量 orders 加 载 到 该 页 面 。 
其 代码 如 下 : 


a 必 wN 


Fowauwmtwm 


记 
已 
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oO 


pppPpPpPpp 
oonoD 
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onShow: function ( ) { 
this.setData ({ 
orders: app.globalData.orders 
}) 
}, 


@ 页 面 加 载 代 码 。 


onLoad:function( ) { 
var that = this; 
wx.getUserInfo ({ // 获 取 用 户 信息 
success: function (res) { 
that .setData ({ 
thumb: res.userInfo.avatarUrl, 
nickname: res.userInfo.nickName 
} ) 
} 
}) 
}, 


@ 单 击 “ 付 款 ” 按 钮 事件 代码 。 


payorders( ) 1{ 
Wx.requestPayment ({ 
timestamp: 'stringl', 
noncestr: 'string2', 
package: 'string3', 
signType: 'MD5°', 
paysign: 'string4', 
success: function (res) { 
console.1og (res) 
}, 
fail: function (res) { 
wx.showModal ({ 
title: ' 支 付 提示 '， 
content: '<text>', 
showCancel: false 
}) 
} 
i 
} 


@ 个 人 中 心 页 面 逻辑 文件 代码 。 


//pages/me/me.js 
var app = getApp( ) 


Page ({ 
/* 初 始 化 数据 2 
/* 个 人 中 心 页 面 加 载 事件 代码 Eat 
/* 个 人 中 心 页 面 显示 事件 代码 wi 
/* 付 款 按钮 事件 代码 2 


1) 
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// 获 取 微 信用 户头 像 
// 获 取 微 信用 户 名 


基本 组 件 


Si 
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本 章 首先 详细 介绍 了 组 件 在 小 程序 页 面 的 定义 、 属 性 设置 和 事件 的 定义 、 绑 定 和 使 用 方 
法 ;然后 结合 小 学 生 算术 题 、 猜 扑克 游戏 、 信 息 登 记 页 面 、 毕 业 生 满意 度 调 查 表 和 购物 车 小 
程序 等 案例 项 目的 开发 过 程 阐述 了 微 信人 小 程序 开发 框架 提供 的 基本 组 件 的 使 用 方法 和 应 用 场 
景 。 读 者 通过 对 本 章 组 件 、 事 件 的 理解 和 掌握 ， 可 以 在 项 目 开 发 中 设计 出 更 令 用 户 满意 的 UI 
和 满足 用 户 需要 的 实用 小 程序 。 


数据 存储 与 访问 


数据 存储 是 开发 应 用 程序 时 需要 解决 的 最 基本 问题 ， 数 据 必须 以 某 种 方式 保存 ， 并 且 能 
够 有 效 、 方 便 地 使 用 和 更 新 处 理 。 微 信 小 程序 开发 框架 提供 的 本 地 存储 主要 包含 本 地 缓存 存 
储 访问 机 制 和 文件 系统 存储 访问 机 制 。 本 章 将 结合 具体 的 案例 介绍 本 地 缓存 存储 访问 机 制 和 
文件 系统 存储 访问 机 制 的 原理 和 使 用 方法 。 

0 本章 学 习 目 标 | 
了 解 小 程序 本 地 存储 与 访问 数据 的 原理 ; 
掌握 数据 缓存 API 和 文件 API 的 使 用 方法 ; 
掌握 wx.chooseImage() 、wx.getImageInfo() 、 wx.saveImageToPhotosAlbum0) 、 
WxX.previewImage() 等 图 片 管理 API 的 使 用 方法 和 应 用 场景 ; 
掌握 wx.getLocation()、wx.openLocation()、wx.chooseLocation() 等 位 置信 息 API 的 
使 用 方法 和 应 用 场景 。 


和 网 络 存储 。 本 地 存储 方式 多 用 于 离线 应 用 开发 ， 网 络 存储 方式 多 用 于 需要 
及 时 更 新 数据 的 重要 项 目 事务 ， 比 如 在 线 售票 、 天 气 预 报 等 应 用 中 的 实时 数 
据 需 要 通过 网 络 传输 到 数据 处 理 中 心 存储 和 处 理 。 

微 信 小 程 开 发 框架 提供 的 本 地 存储 主要 包含 以 下 两 种 存储 访问 机 制 。 
5.1.1 本 地 缓存 存储 访问 机 制 

每 个 微 信 小 程序 都 有 自己 的 本 地 缓存 , 同一 个 微 信用 户 、 同 一 个 小 程序 拥有 不 超过 10MB 
的 本 地 缓存 空间 。 同 一 台 设备 上 不 同 用 户 的 同一 个 小 程序 都 分 别 拥 有 自己 的 本 地 缓存 空间 
该 缓存 空间 不 仅 互 相隔 离 ， 而 且 不 能 互相 访问 。 

如 果 设 备 存储 空间 不 足 ， 微 信人 小 程序 会 清空 最 近 最 久未 使 用 的 本 地 缓存 。 因 此 开发 者 进 
行 微 信 小 程序 开发 时 ， 通 常 上 只 能 使 用 本 地 缓存 机 制 存储 数据 量 不 大 的 一 些 非 关键 信息 ， 以 防 
备 设备 存储 空间 不 足 ， 导 致 数据 丢失 、 用 户 更 换 设备 导致 数据 不 能 迁移 等 问题 。 


5.1.2 文件 系统 存储 访问 机 制 


微 信 小 程序 的 文件 系统 管理 操作 的 文件 分 为 代码 包 文件 和 本 地 文件 两 类 。 
(1) 代码 包 文件 。 
代码 包 文件 指 的 是 微 信 小 程序 项 目 开 发 时 向 项 目 目 录 中 添加 的 文件 ， 用 户 对 该 类 文件 只 
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具有 读 权限 。 对 于 需要 动态 替换 或 占用 存储 空间 较 大 的 文件 ， 尽 量 不 要 使 用 这 种 存储 访问 机 
制 。 如 image 组 件 引 用 的 本 地 图 片 文件 ,需要 保存 到 项 目的 指定 目录 中 才能 由 src 属性 引用 。 

代码 包 文 件 的 访问 路 径 必须 从 项 目 根 目 录 开 始 写 文件 路 径 , 不 支持 相对 路 径 的 写法 。 如 : 
/a/b/c、ay/b/c 都 是 合法 的 ，./a/b/ec 、./a/b/c 则 不 合法 。 

(2) 本 地 文件 。 

本 地 文件 是 指 通 过 微 信 小 程序 开发 框架 提供 的 接口 API 在 本 地 创建 或 HTTPS 请 求 网 络 
下 载 并 存储 到 本 地 的 文件 。 具 体 包括 : 

@ 本 地 临时 文件 ， 它 是 临时 产生 ， 又 可 能 随时 会 被 回收 的 文件 ， 文 件 大 小 不 受 限制 ; 
本 地 临时 文件 的 访问 路 径 为 {{ 协 议 名 }}://tmp/ 文 件 名 。 

@ 本 地 缓存 文件 : 微 信 小 程序 通过 调用 接口 ， 把 本 地 临时 文件 缓存 后 产生 的 文件 ， 不 
能 自 定义 文件 夹 名 称 和 文件 名 称 ， 它 会 随 小 程序 的 删除 而 删除 。 普 通 小 程序 的 本 地 缓存 文件 
大 小 与 本 地 用 户 文 件 大 小 合计 最 多 10MB， 游 戏 类 小 程序 的 本 地 缓存 文件 大 小 与 本 地 用 户 文 
件 大 小 合计 最 多 50MB; 本 地 缓存 文件 的 访问 路 径 为 {{ 协 议 名 }}:// store 文件 名 。 

@ 本 地 用 户 文件 : 微 信 小 程序 通过 调用 接口 ， 把 本 地 临时 文件 缓存 后 产生 的 文件 ， 允 
许 自 定义 文件 夹 名 称 和 文件 名 称 ， 文 件 大 小 与 本 地 缓存 文件 一 样 ， 本 地 用 户 文件 的 访问 路 径 


为 {{ 协 议 名 站}:// usr 文 件 名 。 
其 中 ， 协 议 名 在 iOS/Android 客户 端 为 wxfile， 而 在 开发 者 工具 上 为 htp， 开 发 者 不 用 
关注 这 个 差异 。 


当 微 信 小 程序 被 用 户 添加 到 设备 后 , 会 有 一 块 独立 的 文件 存储 区 域 , 并 与 用 户 维度 隔离 。 
即 同一 个 设备 ， 每 个 微 信 用 户 不 能 访问 到 其 他 登录 用 户 的 文件 ， 同 一 个 用 户 不 同 appId 之 间 
的 文件 也 不 能 互相 访问 。 每 个 微 信 用 户 对 本 地 临时 文件 和 本 地 缓存 文件 只 具有 读 权限 ， 而 对 
本 地 用 户 文件 既 有 读 权 限 ， 又 有 写 权 限 。 

微 信 小 程 开发 框架 提供 的 网 络 存储 方式 有 HTITPS 网 络 请 求 和 去 数据库 存储 访问 机 制 两 
种 。 关 于 网 络 数据 存储 访问 机 制 ， 将 在 第 8 章 介 绍 。 


0 5.2 随手 拍 的 设计 与 袍 


现在 越 来 越 多 的 人 喜欢 用 手机 、 平 板 电脑 等 智能 终端 设备 拍照 ， 但 拍 完 
照片 后 ， 时 间 长 了 容易 忘记 拍 的 地 点 、 时 间或 具体 内 容 等 。“ 随手 拍 ” 小 程 
序 可 以 让 使 用 者 随时 随地 拍 下 精彩 瞬间 ， 并 且 可 以 同时 记录 下 拍摄 的 地 点 、 
时 间 ， 也 可 以 给 照片 添加 详细 的 说 明 信 息 。 本 节 以 开发 设计 “随手 拍 ” 的 案 
例 介绍 小 程序 实现 本 地 缓存 存储 访问 机 制 的 原理 和 使 用 方法 。 


5.2.1 ”预备 知识 


图 片 API 

小 程序 的 图 片 应 用 是 一 个 常用 的 技术 ， 比 如 调用 设备 的 摄像 头 拍摄 图 片 ， 选 择 喜欢 的 图 
片 发 朋友 图、 保存 图 片 等 。 微 信 小 程序 开发 框架 提供 了 专门 对 图 片 进行 处 理 的 API。 下 面 以 
实现 图 5.1 所 示 小 程序 为 例 ， 介 绍 选择 /拍摄 图 片 、 预 览 图 片 、 获 取 图 片 信 息 、 压 缩 图 片 、 保 
存 图 片 到 系统 相册 等 API 的 使 用 方法 。 

单 击 图 5.1 所 示 界 面 的 “拍照 ”按钮 ， 调 用 设备 的 摄像 头 拍照 ， 完 成 后 照片 显示 在 界面 
下 部 的 图 片 显 示 区 域 ， 单 击 “ 选 择 图 片 ”按钮 ， 弹 出 “相册 选择 ”对 话 框 ， 在 对 话 框 中 选择 
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拍照 
选择 图 片 
查看 图 片 信息 


图 5.1 图 片 API 应 用 (1) 


需要 的 图 片 ， 其 显示 在 界面 下 部 的 图 片 显示 区 域 ， 单 击 “ 碍 看 图 片 信息 ”按钮 ， 在 控制 台 打 
印 图 片 的 长 和 宽 的 像素 值 及 图 片 文 件 的 路 径 ; 单 击 “ 保存” 按钮 , 将 图 片 保存 到 系统 相册 中 ; 
单 击 image 组 件 ， 在 新 页 面 进行 图 片 预览 。 页 面 结构 文件 代码 如 下 : 


Own 


<!--pages/photo/photo.wzxml--> 

<button bindtap='getPic'> 拍 照 </button> 

<button bindtap='choosePic'> 选 择 图 片 </button> 
<button bindtap='showPicInfo'> 查 看 图 片 信息 </button> 
<button bindtap='savePic'> 保 存 </button> 

<image bindtap="'viewPic' src='{{picPath} '></image> 


(1) wx.chooseImage (Object object): 从 本 地 相册 选择 图 片 或 使 用 相机 拍照 。object 参数 
及 功能 说 明 如 表 5-1 所 示 。 


表 5-1 object 参数 及 功能 说 明 


属 性 类 型 功 能 
count Number 最 多 可 选择 的 图 片 张 数 ， 默 认 值 为 9 
sizeType Array<string> 所 选 的 图 片 类 型 ， 默 认 值 为 ['original', 'compressed'] 
sourceType Array<string> 所 选 的 图 片 来 源 ， 默 认 值 为 [album', 'camera'] 
Success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


original 表示 原 图 ，compressed 表示 压缩 图 ，album 表示 相册 ，camera 表示 相机 。success(res) 
回调 函数 的 res.tempFilePaths 返回 图 片 的 本 地 临时 文件 路 径 列 表 、restempFiles 返回 图 片 的 本 
地 临时 文件 列表 、res.tempFiles[index].path 返回 本 地 临时 文件 列表 中 下 标 为 mdex 的 图 片 文件 
路 径 、restempFiles[index].size 返回 图 片 的 本 地 临时 文件 列表 中 下 标 为 mndex 的 图 片 文 件 大 小 


(单位 : Byte )。 


因此 ， 实 现 拍 照 功 能 的 getPicO 函 数 代码 如 下 : 


六 getPic() { 


M5S 
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2 Var that = this 

- Wx.chooseImage ({ 

4 count: 4, 

5 sizeType: ['original', 'compressed'’, 
6 sourceType: ['camera'], 

7 success: function (res) { 

8 Var imgs = res.tempFilePaths 


9 Var tem = res.tempFilePaths[0] 
10 that.setData({ 

11 picPath: tem, 

于 交 imgUrls: imgs 

13 }) 

14 } 

15 }) 

16 }, 


其 中 第 4 行 代码 表示 可 选择 的 图 片 数 最 多 为 4 张 ， 第 5 行 代码 表示 选择 的 图 片 为 原 图 或 
压缩 图 类 型 ， 第 6 行 代码 表示 可 选择 的 图 片 来 源 于 相机 ; 第 7~14 行 代码 表示 调用 成 功 后 ， 
将 图 片 文 件 路 径 列表 下 标 为 0 的 元 素 〈 即 当前 照片 的 文件 路 径 ) 及 图 片 文件 路 径 列表 通过 
setData() 函 数 更 新 。 

wx.chooseImage() 函 数 也 可 以 从 相册 选择 图 片 ， 所 以 实现 选择 图 片 功 能 的 choosePic() 函 
数 代码 与 getPic() 函 数 类 似 ， 只 要 将 上 述 代 码 第 6 行 的 camera 修改 为 album 即 可 。 当 然 ， 如 
果 选 择 图 片 时 既 可 以 从 “相册 ”也 可 以 从 “相机 ”就 可 以 将 上 述 第 6 行 代码 修改 为 sourceType: 
['album', 'camera'], 这 样 在 单 击 “ 选 择 图 片 ”按钮 后 , 界面 底部 会 弹出 图 5.2 所 示 的 选择 按钮 。 


拍照 


从 手机 相册 选择 


取消 
图 5.2 图 片 API 应 用 (2) 


(2) wx.getImageInfo (Object object): 获取 图 片 信息 。object 参数 及 功能 说 明 如 表 5-2 
所 示 。 
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表 5-2 object 参数 及 功能 说 明 


se 图 片 的 路 径 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 


complete Function 接口 调用 结束 的 回调 函数 


src 表示 要 获得 图 片 信息 的 图 片 文件 路 径 , 该 路 径 可 以 是 相对 路 径 、 临 时 文件 路 径 、 存 储 
文件 路 径 、 网 络 图 片 路 径 。 网 络 图 片 需 配置 download 域名 后 才能 生效 ， 其 内 容 会 在 后 面 网 络 
应 用 开发 章节 介绍 。successGres) 回 调 函数 的 res.width 和 res.height 返回 图 片 的 原始 宽度 和 高 度 
(单位 ，px)，res.path 返回 图 片 的 本 地 路 径 ，res.orientation 返回 拍照 时 的 设备 方向 ，res.type 
返回 图 片 格式 。 因 此 ， 实 现 显示 图 片 信息 功能 的 showPicInfo 0 函数 代码 如 下 : 

showPicInfo: function () { 

var that = this 
wx.getImageInfo({ 
src: that.data.picPath, 
success: function (res) { 
console.10g (' 图 片 宽 : '，res.width，" 图 片 高 : "，res.height，" 图 片 路 径 ，"， 
es.path) 
} 
}) 
}, 


其 中 第 4 行 代码 指定 图 片 路 径 的 src 为 picPath (由 data 定义 ); 第 6 行 代 码 表示 在 控制 
台 容 器 输出 图 片 的 宽度 、 高 度 和 图 片 的 路 径 。 

(3) wx.saveImageToPhotosAlbum(Object object): 保存 图 片 到 系统 相册 。object 参数 及 功 
能 说 明 如 表 5-3 所 示 。 
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表 5-3 object 参数 及 功能 说 明 


属 性 类 型 能 
filePath String 图 片 文件 路 径 
Success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


filePath 表示 要 保存 到 系统 相册 的 图 片 文件 路 径 , 该 路 径 可 以 是 临时 文件 路 径 或 永久 文件 
路 径 ， 但 不 支持 网 络 图 片 路 径 ，successGres) 和 fail(res) 回 调 函 数 的 res.erMsg 返回 保存 图 片 的 
返回 信息 。 因 此 ， 实 现 保存 图 片 功能 的 savePic 0 函数 代码 如 下 : 


savePic: function () { 
var that = this 
Wx.SaveImageToPhotosAlbum({ 
filePath: that.data.picPath,// 要 保存 图 片 的 路 径 
success: function (res) { 
console.1og (res.errMsg) // 输 出 保存 成 功 的 回调 信息 
wx.showToast ({ 


title: "保存 成 功 ! '， 
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9 }) 

10 }, 

EL fail: function (res) { 

a console.1og (res.errMsg) // 输 出 保存 失败 的 回调 信息 
13 wx.SshowToast ({ 

14 title: ' 保 存 失败 !'， 

ES }) 

16 1 

17 }) 

18 用 


(4) wx.previewImage(Object objecb: 在 新 页 面 中 全 屏 预 览 图 片 。 预 览 的 过 程 中 ， 用 户 可 
以 进行 保存 图 片 、 发 送 给 朋友 等 操作 。object 参数 及 功能 说 明 如 表 5-4 所 示 。 


表 5-4 object 参数 及 功能 说 明 
属性 | 类 型 | 功 能 
mls 要 预览 的 图 片 链接 列表 
current 当前 显示 的 图 片 链接 ， 默 认 值 为 urls 中 的 第 一 项 
Success 接口 调用 成 功 的 回调 函数 
fil 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


urls 表示 要 全 屏 预 览 图 片 的 链接 地 址 列表 ， 该 列表 中 必须 存放 网 络 地 址 。 因 此 ， 实 现在 
新 页 面 预览 图 片 功能 的 viewPic 0 函数 代码 如 下 : 


ViewPic: function () { 
区 var that = this 
了 wx.previewImage ({ 
4 current: that.data.imgUrls[0]，// 当 前 显示 图 片 的 http 链接 
5 urls: that.data.imgUrls // 需 要 预览 的 图 片 http 链接 列表 
6 }) 
江 }, 
位 置 API 


位 置 应 用 也 是 微 信 小 程序 的 一 种 常用 功能 ， 微 信 小 程序 框架 提供 了 使 用 
微 信 内 置地 图 查看 位 置 、 获 得 当前 位 置 及 选择 位 置 的 API。 

(1 ) wx.getLocation(Object objecb: 获取 当前 地 理 位 置 、 速 度 等 信息 。object 
参数 及 功能 说 明 如 表 5-5 所 示 。 


表 5-5 object 参数 及 功能 说 明 


属 性 功 能 
坐标 类 型 ，wgs84 类 型 返回 gps 坐标 ，gcj02 类 型 返回 国 测 局 坐标 ,默认 
We 值 为 wgs84 
le oan 是 否 返 回 海拔 高 度 , true 返回 高 度 信息 ， 由 于 获取 高 度 需要 较 高 精确 度 ， 
因此 会 减 慢 接口 返回 速度 ， 默 认 值 为 false 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 


complete Function 接口 调用 结束 的 回调 函数 
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空间 测量 都 需要 一 个 特定 的 坐标 系 作为 基准 ， 微 信 小 程序 使 用 的 坐标 系统 有 wgs84 和 
gcj02 两 种 标准 : wgs84 的 全 称 是 World Geodetic System 1984， 它 是 美国 国防 局 为 GPS (全 球 
定位 系统 ) 在 1984 年 建立 的 一 种 地 心 坐 标 系统 ; gcj02 的 全 称 是 国家 测量 局 02 标准 , 它 是 中 
国 国 家 测量 局 定制 的 信息 系统 坐标 系统 。 目 前 ， 微 信 Web 开发 者 工具 仅 支 持 gcj02 坐标 ， 并 
且 gcj02 国 测 局 坐标 可 用 于 wx.openLocation() 函 数 的 坐标 。 其 代码 使 用 格式 如 下 : 


于 wx.getLocation({ 

2 type: 'gcj02'， // 设 置 坐标 类 型 

3 altitude:true， // 设 置 返回 高 度 信息 

4 success (res) { 

5 const latitude = res.latitude // 纬 度 

6 const longitude = res.longitude // 经 度 

7 const speed = res.speed // 速 度 

8 const accuracy = res.accuracy // 位 置 精确 度 
9 const altitude = res.altitude // 位 置 高 度 
10 } 

于 }) 


Wx.getLocation() 函 数 中 success(res) 回 调 函 数 的 res.latitude 和 res.longitude 返回 当前 位 置 
的 纬度 (范围 为 -90~90, 负数 表示 南 纬 ) 和 经 度 (范围 为 -180~180, 负数 表示 西 经 ), res.speed 
返回 速度 (单位 为 m/s)，res.accuracy 返回 精确 度 ，res.altitude 返回 当前 位 置 高 度 ， 单 位 为 
m， 开 发 中 必须 使 用 上 述 第 3 行 代码 )。 

(2) wx.openLocation(Object object): 根据 纬度 、 经 度 ， 在 微 信 内 置地 图 查看 位 置 。object 
参数 及 功能 说 明 如 表 5-6 所 示 。 


表 5-6 object 参数 及 功能 说 明 


属 性 类 型 功 能 
latitude Number 设置 要 查看 位 置 的 纬度 
longitude Number 设置 要 查看 位 置 的 经 度 
scale Number 设置 地 图 缩放 比例 ， 范 围 为 $~18， 默 认 值 为 18 
name String 设置 查看 位 置 的 位 置 名 
address String 设置 查看 位 置 的 地 址 详细 说 明 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


wx.openLocation() 函 数 的 使 用 代码 格式 如 下 : 


wx.openLocation({ 
latitude: latitude, // 设 置 要 查看 位 置 的 纬度 
longitude: longitude, // 设 置 要 查看 位 置 的 经 度 
scale: 6, // 设 置地 图 缩放 比例 
name: ' 我 的 位 置 '， // 设 置 要 查看 位 置 的 名 称 
address: ' 图 书馆 大 楼 9 楼 ' ， // 设 置 要 查看 位 置 的 详细 地 址 信息 
success: function (res) { 
console.1og (res .errMsg) // 输 出 函数 调用 结果 信息 
} 
}) 
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上 述 代码 第 2 行 用 于 指定 要 查看 位 置 的 纬度 值 ;， 第 3 行 用 于 指定 要 查看 位 置 的 经 度 值 ; 
第 5~6 行 用 于 指定 在 地 图 底部 显示 的 “名 称 ” 和 “地 址 信息 ”， 运 行 效果 如 图 5.3 所 示 。 


nane 一 > 我 的 位 置 
address [> 图书 忆 大 楼 ?楼 


图 5.3 位 置 API 应 用 (1) 


(3) wx.chooseLocation(Object objecb: 打开 微 信 内 嵌 地 图 选择 位 置 。object 参数 及 功能 
说 明 如 表 5-7 所 示 。 


表 5-7 object 参数 及 功能 说 明 


属 性 
success | Function 
fail 


接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


| Function 


complete Function 


wx.chooseLocation() 函 数 的 使 用 代码 格式 如 下 : 


1 Wx.chooseLocation({ 

success: function(res) { 

3 var name = res.name // 返 回 位 置 名 称 

4 Var address = res.address // 返 回 位 置 详细 信息 
号 var latitude = res.latitude // 返 回 位 置 纬度 

6 var longitude= res.longitude // 返 回 位 置 经 度 

于 console.1og( name, address,1atitude,1longitude) 

8 }, 

9 }) 


运行 上 述 代 码 后 ， 根 据 当 前 位 置 列 出 附近 地 址 信息 ， 供 用 户 选择 。 用 户 选择 地 址 后 ， 
success(res) 回 调 函 数 的 res.name 返回 选中 位 置 的 名 称 ,res.address 返回 选中 位 置 的 详细 信息 ， 
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res.latitude 和 res.longitude 分 别 返回 选中 位 置 的 纬度 和 经 度 。 运 行 效 果 如 图 5.4 所 示 。 


这 中 后 症 击 确定 
| 


供 选择 的 地 址 列表 
ER 


会 垢 楼 ( 答 伟 店 ) 


了 芒 鲁 胡 州 市 高 策 区 府 前 第 1 


图 5.4 位 置 API 应 用 (2) 


数据 缓存 API 

移动 端 应 用 程序 经 常 需要 访问 一 些 业 务 数据 ,这 些 数 据 通常 数量 较 大 、 访 
问 频率 较 高 。 如 果 都 使 用 网 络 访问 机 制 存储 和 访问 这 些 数据 ， 一 方面 会 浪费 网 
络 带宽 ， 另 一 方面 也 会 降低 小 程序 的 运行 效率 。HTMLS 开始 提供 了 一 种 在 客 
户 端 存储 数据 的 新 方法 一 一 localstorage， 它 突破 了 传统 的 cookie 存储 数据 的 
4KB 限制 。 使 用 它 进行 数据 存储 ， 就 相当 于 针对 前 端 页 面 的 小 型 数据 库 。 2 

微 信 小 程序 开发 框架 也 提供 了 localstorage 的 数据 存储 访问 机 制 , 该 机 制 将 数据 存储 在 本 
地 缓存 的 指定 key 中 。 数 据 存储 生命 周期 跟 小 程序 本 身 一 致 ， 即 除 用 户主 动 删除 或 超过 一 定 
时 间 被 自动 清理 ， 数 据 都 一 直 可 以 使 用 。 单 个 key 允许 存储 的 最 大 数据 长 度 为 1IMB， 所 有 
数据 存储 上 限 为 10MB。 

(1) wx.setStorage (Object object): 向 本 地 缓存 中 异步 存储 数据 。object 参数 及 功能 说 明 
如 表 5-8 所 示 。 


表 5-8 object 参数 及 功能 说 明 


属 性 功 能 
key 设置 本 地 缓存 中 用 于 存储 数据 的 键 (key) 
data 设置 本 地 缓存 中 存储 的 数据 值 (value) 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


wxX.setStorage() 函 数 的 使 用 代码 格式 如 下 : 


1 WX-SetStorage ({ 
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key: "age'， // 保 存 的 key 名 为 age 
data: 20, // 保 存 的 数据 为 20 
success (res) {// 保 存 成 功 的 回调 函数 
wx.SshowToast ({ 
title: ' 保 存 成 功 '， 
})， 
} 
}) 


上 述 代码 表示 在 本 地 缓存 中 存放 1 个 key 为 age， 值 为 20 的 数值 ， 如 果 存 放 成 功 ， 调 用 
wx.showToast() 函 数 给 出 提示 信息 。 代 码 运行 后 调试 窗口 显示 结果 如 图 5.5 所 示 。 


worGN 


RR | Console Storage Sources Network Security AppData Audits Sensor Trace Wxml 
© | [pe Current Size : 500B 
age | 2» Number 


图 5.5 本 地 缓存 数据 


(2) wx.setStorageSync(string key, any data): 向 本 地 缓存 中 同步 存储 数据 。 该 函数 的 使 用 
代码 格式 如 下 : 


1 wx.setstorageSsync('name', 'kate') 


上 述 代 码 表示 在 本 地 缓存 中 存放 1 个 key 为 name， 值 为 kate 的 字符 串 。 
(3) wx.getStorage(Object objecb: 从 本 地 缓存 中 异步 读 取 数据 。object 参数 及 功能 说 明 如 
表 5-9 所 示 。 


表 5-9 object 参数 及 功能 说 明 

功 能 
设置 从 本 地 缓存 中 读 取 键 (key) 对 应 的 数据 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 


complete Function 接口 调用 结束 的 回调 函数 


success(res) 回 调 函 数 的 res.data 返回 key 对 应 的 数据 。wx.getStorage() 函 数 的 使 用 代码 格 
式 如 下 : 


wx.getstorage ({ 
key: 'age', 
success: function (res) { 
console.1log (res.data) 
}, 
fail:function (res){ 
console.1og (res.errMsg) 
} 
}) 


上 述 代 码 第 2 行 指定 要 读本 地 缓存 中 key 为 age 的 值 ， 第 3~5 行 代码 表示 读 取 成 功 后 ， 
在 控制 台 窗 口 输出 age 的 值 ， 第 6~8 行 代码 表示 读 取 失败 后 ， 在 控制 台 窗 口 输出 错误 信息 。 

(4) wx.getStorageSync(string key, any data): 从 本 地 缓存 中 同步 读 取 数 据 。 该 函数 的 使 用 
代码 格式 如 下 : 
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console.1og('" 对 不 起 ， 没 有 读 到 该 键 对 应 的 数据 ') 
| 


1 Var age = wx.getstorageSync('age') 
2 if (age) { 

3 console.1log(age) 

4 Velse t 

村 

6 


上 述 代码 第 1 行 表 示 从 本 地 缓存 中 读 取 key 为 age 的 值 ;第 2~6 行 表示 如 果 读 到 数据 ， 
在 控制 台 输出 数据 ， 否 则 输出 “对 不 起 ， 没 有 读 到 该 键 对 应 的 数据 ”。 

(5) wx.getStorageInfo(Object object): 异步 读 取 本 地 缓存 中 的 key、 占 用 空间 大 小 和 限制 
空间 大 小 等 信息 。object 参数 及 功能 说 明 如 表 5-10 所 示 。 


表 5-10 object 参数 及 功能 说 明 
属 性 类 型 功 能 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


success(res) 回 调 函 数 的 res.keys 返回 当前 本 地 缓存 中 的 所 有 key, res.currentSize 返回 当前 
占用 空间 大 小 〈 单 位 : KB)，res.limitSize 返回 限制 空间 大 小 。wx.getStorageInfo() 函 数 的 使 用 
代码 格式 如 下 : 


wx.getstorageInfo({ 
success: function (res) { 
Var keys = res.keys 
Var cSize = res.currentsize 
Var cLSize = res.limitsize 
console.1log (keys, cSize, cLSize) 
}, 
}) 


(6) wx.getStorageInfoSync(): 同步 读 取 本 地 缓存 中 的 key、 占 用 空间 大 小 和 限制 空间 大 
小 等 信息 。 该 函数 的 使 用 代码 格式 如 下 : 
Var res = WX.getStorageInfoSync () 
Var keys = res.keys 
cSize = res.currentsize 


var cLSize = res.limitsize 
console.1og (keys，cSize，cLSize) 


(7) wx.removeStorage(Object objecb: 从 本 地 缓存 中 异步 删除 数据 。object 参数 及 功能 说 
明 如 表 5-11 所 示 。 
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表 5-11 object 参数 及 功能 说 明 


属 性 功 能 
key 设置 从 本 地 缓存 中 删除 键 (key) 对 应 的 数据 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 


接口 调用 结束 的 回调 函数 
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success(res) 回 调 函 数 的 res.errMsg 返回 删除 成 功 信息 。wx.removeStorage() 函 数 的 使 用 代 


码 格式 如 下 : 

下 Wx.removeStorage ({ 

2 key: "age's 

可 success: function(res) { 
4 console.1og (res.errMsg) 
5 }，v 

6 }) 


上 述 代码 第 1 行 表 示 从 本 地 缓存 中 删除 key 为 “age” 的 值 。 
(8) wx.removeStorageSync(string key): 从 本 地 缓存 中 同步 删除 指定 key 的 数据 。 该 函数 
的 使 用 代码 格式 如 下 : 


1 wx.removeSstoragesync('name') 


(9) wx.clearStorage(Object object): 异步 清除 本 地 缓存 数据 。object 参数 及 功能 说 明 如 
表 5-12 所 示 。 


表 5-12 object 参数 及 功能 说 明 

功 能 
设置 从 本 地 绥 存 中 删除 刍 key) 对 应 的 数据 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 


complete Function 接口 调用 结束 的 回调 函数 


wx.clearStorage() 函 数 的 使 用 代码 格式 如 下 : 
1 wx.clearstorage() 
(10) wx.clearStorageSync(Object object): 同步 清除 本 地 缓存 数据 。 该 函数 的 使 用 代码 格 
式 如 下 : 


1 wx.clearSstorageSync() 


5.2.2 ”随手 拍 的 实现 


本 项 目 一 共 包 含 首 页 (图 5.6)、 拍 照 (图 5.7) 和 收藏 (图 5.8) 3 个 页 
面 ，3 个 页 面 需 要 以 tabBar 的 形式 展示 。 

首页 页 面 用 于 展示 已 经 保存 在 本 地 缓存 中 的 图 片 、 标 题 和 内 容 描述 ， 拍 。 出 关 2 
照 页 面 可 以 调用 设备 的 拍照 功能 拍摄 照片 ， 获 取 当 前 拍照 位 置 ， 输 入 标题 和 加 下 字 焉 襄 
内 容 描 述 信息 ， 并 保存 ， 收 藏 页 面 用 于 展示 收藏 的 图 片 、 标 题 和 内 容 描述 信 5231 
息 ， 也 可 以 通过 向 左 滑动 取消 收藏 ， 如 图 5.9 所 示 。 

创建 项 目 

根据 随手 拍 功能 需求 的 介绍 , 需要 在 小 程序 项 目下 创建 images 文件 夹 , 用 于 存放 随手 拍 
小 程序 开发 中 用 到 的 图 片 资源 文件 ， 在 pages 文件 夹 下 创建 3 个 文件 夹 ， 分 别 用 于 存放 首页 
页 面 (home)、 拍 照 页 面 (get) 和 收藏 页 面 (collect)。 


autwn 
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wesss WeChats seeee WeChats 


小 红 花 
局 未 在 天 乱 湖 公园 香 到 的 一 位 小 朋 矶 右 各 上 戴 荐 一 末 小 _ 


汽车 标志 
这 是 什么 汽车 标志 思 ? 哪 位 朋 丰 告诉 我 ? 


日 


师范 教育 是 我 院 本 科教 育 的 特色 之 一 ， 多 生来 我 莞 一 直 


“seee WeChats 


友 右 华 上 载 关 一休 小 红 苑 。 


微 信 标 志 
好 看 不 ? 好 看 不 ? 


图 书馆 
1 教育 是 我 院 本 科教 育 的 行 色 之 二 利 教育 的 生生 之 
一 ,全 年 末 我 院 一 直 高 度 重视 而.… 二 计 度 重视 历 


图 5.8 收藏 界面 图 5.9 取消 收藏 界面 


tabBar 底部 标签 的 设计 
修改 app.json 全 局 配置 文件 ， 其 详细 代码 如 下 : 


{ 


"pages": { 
"pages/home/home", 
"pages/get/get", 
"pages/collect/collect" 

] ， 

"permission": { 
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8 "scope.userLocation": { 

9 "desc": "随手 拍 用 于 获取 地 址 ! " 

10 } 

1 于 

2 "window": { 

13 "backgroundTextStyle": "light", 
14 "navigationBarBackgroundColor": "#F53333", 
15 "navigationBarTitleText": "随手 拍 "， 
16 "navigationBarTextStyle": "white" 
.7 ]， 

18 EL 

19 "backgroundColor": "#F53333", 

20 了 EDU eT 

爸 矶 "selectedColor": "#ffff00", 

Fi eh 

23 

24 "pagePath": "pages/home/home", 
25 "text": "首页 " 

26 by 

2 { 

28 "pagePath": "pages/get/get", 
29 "text": "拍照 " 

30 ] 

SE { 

和 "pagePath": "pages/collect/collect", 
33 "text": "收藏 " 

34 } 

35 ] 

36 } 

:i : 


上 述 代 码 第 7~11 行 表示 允许 小 程序 具有 地 理 位 置 获取 权限 。 因 为 在 小 程序 开发 中 ， 部 
分 接口 函数 需要 经 过 用 户 授权 同意 后 才能 调用 ， 本 项 目 中 的 调用 地 理 位 置 接 口 也 属于 用 户 授 
权 范围 ， 所 以 配置 文件 中 需要 使 用 上 述 代码 进行 授权 。 一 旦 小 程序 使 用 者 接受 授权 ， 就 可 以 
直接 调用 地 理 位 置 接口 函数 ， 否 则 会 弹出 窗口 询问 使 用 者 。scope.userLocation 对 应 的 授权 接 
口 函数 包括 获取 地 理 位 置 函数 一 一 wx.getLocation0 和 选择 地 理 位 置 函数 一 一 wx.chooseLocation()。 
在 需要 授权 scope.userLocation 时 ， 必 须 配 置地 理 位 置 用 途 说 明 , 代码 格式 如 


了 Tl -@] 
上 述 代码 第 9 行 所 示 ， 其 表示 在 小 程序 获取 地 理 位 置 接口 权限 时 显示 的 用 途 3 
说 明 信 息 ， 最 长 不 超过 30 个 字符 。 ; 
首页 页 面 的 设计 与 实现 回 
(1) 首页 界面 设计 。 5.2.2.4 


从 图 5.6 可 以 看 出 ， 整 个 首页 页 面 以 flex 布局 的 column 方式 显示 每 一 条 随手 拍 信息 ( 包 
括 图 片 、 标 题 、 内 容 描述 和 是 否 收藏 图 片 )， 每 一 行 以 flex 布局 的 row 方式 显示 每 一 条 随手 
拍 信息 的 具体 内 容 ， 设 计 如 图 5.10 所 示 。 如 果 本 地 缓存 中 存放 了 随手 拍 信息 ， 就 在 home 页 


。 text image 
image 
text 


图 5.10 首页 每 行 信息 显示 设计 效果 图 
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面 上 按照 指定 的 展示 样式 显示 随手 拍 信息 ， 和 否则 就 在 页 面 显示 “你 还 没有 随手 拍 !”。 
Q 页 面 结构 文件 代码 。 


1 <!--pages/home/home .wzxml——> 

站 <view class='container' wzx:if='{{isHave}}'> 

， <scroll-view class="'scrollview' style='height:100%' scroll-y> 

4 <view class='info' wzx:for="{{infos}}"> 

汪 <image class="'img' src='{{item.imgPath}}'></image> 

6 <view> 

7 <view class='infotop'> 

8 <text class='txttitle'>{{item.title}}</text> 

9 <image bindtap='imgSave' wx:if='{{item.isSave}}' data-i='{{index}}"' 
class='imgsave' src='/images/light.png'></image> 

10 <image bindtap="'imgSave' wx:else class='imgsave' data-i='{{index}}" 
src='/images/black.png'></image> 

EY </view> 

12 <view class='txtcontent'> 

3 <text>{{item.content}}</text> 

14 </view> 

5 </view> 

16 </view> 

正和 </scroll-view> 


18 </view> 
19 <view class='container' wzx:else> 你 还 没有 随手 拍 ! </view> 


上 述 代码 第 2~18 行 表示 如 果 本 地 缓存 中 存放 了 随手 拍 信息 , 就 按照 图 5.6 所 示 的 每 一 行 
样式 显示 图 片 、 标 题 、 内 容 描述 和 表示 是 否 收藏 的 图 片 。 第 2 行 代码 用 条 件 泻 染 语句 wx:if 
绑 定 isHave 变量 ，isHave 的 值 由 本 页 面 的 逻辑 功能 代码 控制 ， 如 果 在 本 地 缓存 中 读 到 数据 ， 
isHave 的 值 为 true, 否则 为 false。 第 4 行 代 码 用 scroll-view 组 件 的 scroll-y 属性 指定 页 面 沿 垂 
直方 向 滚动 。 根 据 图 5.10 所 示 的 设计 效果 图 ， 每 行 的 左 侧 由 image 组 件 绑 定 图 片 存放 路 径 ， 
右 侧 分 为 上 下 两 个 部 分 : 上 部 左 侧 用 text 组 件 绑 定 标题 ， 右 侧根 据 收藏 标志 isSave 变量 ， 使 
用 条 件 泻 染 语句 控制 image 组 件 是 绑 定 代表 “已 收藏 ”的 图 片 〈lightpng) 还 是 代表 “未 收 
藏 ” 的 图 片 (blackpng)， 下 部 用 text 组 件 绑 定 内 容 描述 信息 。 由 于 页 面 上 显示 信息 的 行 数 
本 地 缓存 中 存放 的 信息 条 数 决定 ， 所 以 在 页 面 逻 辑 文件 代码 中 通过 读 取 本 地 缓存 信息 的 方法 
读 出 信息 后 存放 在 infos 数组 中 ， 然 后 用 上 述 第 4 行 代 码 ， 通 过 绑 定 infos 数组 的 方法 进行 列 
表 泻 染 后 显示 在 页 面 上 。 

@ 页 面 样式 文件 代码 。 


EE /* pages/home/home.wxss */ 
2 .container { 

多 display: flex; 

4 flex-direction: column; 
与 align-items: center; 

6 有 

二 .scrollview { 

8 margin-top: 3rpx; 

9 width: 98%; 

10 height: 100%; 

JR 

12 ”/* 每 行 随手 拍 信息 样式 */ 
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pb 

14 display: flex; 
flex-direction: row; 
16 margin-bottom: 10rpx; 
17 background: white; 

18 height: 10%; 


19 3 
20 /* 每 行 左 侧 图 片 样式 */ 
21 -img 


2 width: 100rpx; 

23 height: 100%; 

24 margin-right: S5rpx; 
2 

26 /* 每 行 右 上 侧 样式 */ 

27 -infotop 
28 display: flex; 

区 名 flex-direction: row; 
了 

31 /* 每 行 右上 侧 的 标题 样式 */ 
32 .txttitle { 
39 font-size: 35rpx; 
34 flex: 1; 
et : 

36 /* 每 行 右上 侧 的 已 收藏 /未 收藏 图 片 样式 */ 
37 .imgsave { 

38 padding: 5rpx 5rpx 5rpx 5rpx; 
39 width: 40rpx; 

40 height: 40rpx; 

六 

42 /* 每 行 右 下 侧 内 容 描述 信息 样式 */ 

43 .txtcontent { 

44 font-size: 28rpx; 

45 width: 650rpx; 

46 display: -webkit-box; 


47 -webkit-line-clamp: 1; 

48 overflow: hidden; 

49 text-overflow: ellipsis; 

50 -webkit-box-orient: vertical; 
5 word-break: break-all; 

Sa 


上 述 第 46~51 行 代码 表示 强制 文本 在 一 行内 显示 , 超出 文本 用 省 略 号 代替 。 

(2) 首页 页 面 功能 实现 。 

当 显示 首页 页 面 时 ， 首 先 读 取 本 地 缓存 并 判断 本 地 缓存 有 没有 指定 key (本 
项 目 为 mnfos) 的 数据 ， 然 后 根据 判断 结果 ， 按 照 页 面 布局 格式 更 新 页 面 内 容 。 
中 初始 化 数据 。 

data: { 
isHave: false,// 判 断 是 否 有 数据 ， 用 于 控制 页 面 上 的 显示 内 容 


infos: [] // 存 放 本 地 缓存 中 读 出 的 随手 拍 信息 
}， 


@ 监听 页 面 显示 事件 。 


心 w N 
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onShow: function () { 
var temp = wxX-getStorageSync("infos") // 读 出 缓存 中 的 数据 
var isHave = false 
if (temp) { // 数 组 不 为 空 
isHave = true 
} 
this.setData({ 
infos: temp, 
isHave: isHave 
}) 
}, 


在 页 面 显示 或 切换 到 前 台 时 , 首先 需要 从 本 地 缓存 中 读 出 key 为 infos 的 数据 , 然后 判断 
infos 是 否 为 室 ， 如 果 不 为 室 ， 则 更 新 infos、isHave 数据 内 容 。 读 者 需要 注意 : 该 业务 处 理 
代码 应 该 放 在 onShow0 函 数 中 ， 而 不 应 该 放 在 onLoad0 函 数 中 ， 因 为 onLoad0) 仅 在 小 程序 开 
始 运行 时 执行 一 次 ， 而 onShow0 函 数 在 每 次 页 面 切 换 到 前 台 时 都 会 执行 ,这样 可 以 保证 即使 
在 拍照 页 面 或 收藏 页 面 对 本 地 缓存 中 的 数据 进行 了 更 新 ， 当 页 面 切 换 到 首页 时 ， 首 页 显示 的 
内 容 也 会 一 起 更 新 。 

@ 单 击 每 行 最 右 侧 “ 收 藏 ”图 片 事 件 。 
imgSave: function (e) { 

var i = e.currentTarget.dataset.i  // 获 得 收藏 传递 来 的 下 标 

var infos = this.data.infos // 获 得 原 存放 数据 

infos[i] .issave = !this.data.infos[i] .issave // 将 下 标 对 应 数组 元 素 的 保存 状态 修改 

this.setData({ 

infos: infos 

i 
wx.setstoragesync ("infos"，this.data.infos) // 更 新 后 继续 保存 
}, 


拍照 页 面 的 设计 与 实现 

(1) 拍照 界面 设计 。 

从 图 5.7 可 以 看 出 ， 整 个 拍照 页 面 从 上 到 下 分 为 照片 预览 、 地 理 位 置 、 
标题 、 详 细 内 容 和 保存 5 部 分 ， 并 以 flex 布局 的 column 方式 显示 在 页 面 上 。 
“照片 预览 ”用 image 组 件 实现 ;“ 地 理 位 置 ” 用 text 组 件 显示 《〈 并 在 其 右 侧 
用 image 组 件 显示 当前 位 置 图 片 );“ 标 题 ” 用 input 组 件 实现 ;“ 详 细 内 容 ” 
用 textarea 组 件 实现 ;“ 保 存 ” 用 text 组 件 实现 。 

QD 页 面 结构 文件 代码 。 


<!--pages/get/get .wxm1--> 
<View class='container'> 


FFPeoowaw 必 wm 


上 口 


omwamnmuwewnP 


3 <image bindtap='getImg' class="'imgCamera"' mode='aspectFit' src= '{.imgPath}}'> 
</image> 

4 <view class="'location'> 

5 <text>{ {position}}</text> 

6 <image bindtap="'getLocation' class="'imgLocation' mode='scaleToFill' src= 
'/images/location.jpg'></image> 

</view> 

8 <View class='content'> 

9 <input value="'{{title}}"' bindinput="'getTitle' class='title' placeholder= 


' 请 输入 标题 '></input> 
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10 <textarea value='{{content}}' bindinput='gqetContent' class='info'" 
maxlength= '800' placeholder=' 写 点 儿 什 么 ? '></textarea> 

31 <text bindtap='write' class='save' space='nbsp'> 保 存 </text> 
下 </view> 


13 </view> 


上 述 代码 第 3 行 用 image 组 件 的 bindtap 属性 绑 定 单 击 事件 , 用 于 调用 相机 拍摄 照片 , 用 
src 属性 绑 定 image 组 件 上 显示 的 照片 路 径 ， 用 mode 属性 指定 图 片 为 保持 纵横 比 缩放 图 片 的 
显示 模式 ， 第 4-7 行 用 于 实现 地 理 位 置 显示 功能 ， 其 中 第 5 行 用 text 组 件 显示 位 置信 息 ， 第 
6 行 用 image 组 件 显示 当前 位 置 图 标 ， 并 用 bindtap 属性 绑 定 单 击 事件 ， 用 于 调用 地 图 APL， 
获得 地 理 位 置信 息 。 
@ 页 面 样式 文件 代码 。 
/* pages/get/get.wxss */ 
/* container 样式 与 首页 页 面 样式 文件 一 样 ， 此 处 省 略 */ 
/* 照片 预览 区 样式 */ 
.imgCamera { 

background-color: white; 


width: 98%; 
height: 40%; 


waoummwn 


} 
9 /* 位 置 显示 区 样式 */ 
ELO0 “location 
1 margin-top: Srpx; 


2 background-color: white; 
3 display: flex; 
14 flex-direction: row; 


B Ks width: 98%; 
16 height: 50rpx; 


} 
18 /* 位 置 显示 区 当前 位 置 图 片 样式 */ 
19 .imgLocation { 
20 background-color: white; 
之 人 width: 25%; 
2 人 height: 50rpx; 


2 
24 /* 位 置 显示 区 位 置信 息 样式 */ 
25° "toxt 渤 


26 font-size: 30rpx; 
wp) width: 75%; 

28 height: 50rpx; 
:4 

30 /* 标题 以 下 区 域 样式 */ 
31 .content { 

汉 2 margin-top: 5rpx; 
33. width: 98%; 

34 height: 55%; 


} 
36 /* 标题 样式 */ 
7 0 ELe 
38 background-color: white; 
39 width: 100%; 
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40 height: 50rpx; 
41 font-size: 30rpx; 
42 1} 
43 /+* 详细 内 容 样式 */ 
44 .info { 
45 margin-top: Srpx; 
46 background-color: white; 
47 width: 100%; 
48 height: 75%; 
49 font-size: 30rpx; 
"et 
51 /* 保存 文本 样式 */ 
D2 “save t 
5 display: flex; 
54 flex-direction: row; 
55 justify-content: center; 
56 align-items: center; 
a width: 100%; 
58 height: 15%; 
59 font-size: 30rpx; 
60 Colors rgo(1457 0 1139 39h7> 
74 
(2) 拍照 页 面 功能 实现 。 


启动 拍照 页 面 时， 首先 读 取 本 地 缓存 ， 并 判断 本 地 缓存 有 没有 指定 key 
(本 项 目 为 mfos) 的 数据 ， 然 后 根据 判断 结果 更 新 infos 内 容 。 当 单 击 “一 点 
就 拍 ” 后， 调用 图 片 API 拍照 ， 当 单 击 “当前 位 置 ”后 ， 调 用 位 置 API 获取 
位 置信 息 ; 也 可 以 在 页 面 的 对 应 位 置 处 输入 标题 、 详 细 内 容 后 单 击 “保存 ” 
按钮 ， 将 当前 页 面 的 所 有 信息 以 {图 片 路 径 ， 所 在 位 置 ， 标题， 详细 内 容 ， 收 
藏 与 否 } 的 格式 保存 在 infos 数组 中 。 如 果 没 有 输入 标题 信息 ， 系 统 默认 以 当 
前 日 期 时 间作 为 标题 。 

@ 初始 化 数据 。 


1 data: { 
2 inFose [1 // 所 有 数据 
池 imgPath: "/images/sample.jpg"， // 默 认 照 片 路 径 
4 Bosition: wm7 // 当 前 位 置 
号 em // 默 认 年 月 日 时 分 秒 作 标 题 
6 content: '', // 默 认为 空 
六 isSave: false // 收 藏 与 否 ， 默 认 没有 收藏 
8 }， 
@ 页 面 加 载 事件 。 
和 onLoad: function (options) 1 
2 var temp = wx.getstorageSync ("infos")// 同 步 获 取 数 据 
if (temp) { 
4 this.setDatal({ 
号 infos: temp 
6 }) 
7 } 
8 }, 
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上 述 第 3~7 行 代码 表示 ,如 果 页 面 加 载 时 从 本 地 缓存 中 读 取 key 为 infos 的 数据 不 为 空 ， 
则 将 该 数据 更 新 给 本 页 面 定义 的 infos 数组 变量 ， 以 便 在 原 有 数据 上 追加 新 数据 信息 。 
@ 拍照 事件 。 


bh getImg: function (res) { 

之 var that = this 

3 wX-ChooseImage ({ 

4 oune ls 

与 sizeType: ['original', "compressed']， 
6 sourceType: ['album'， "camera'"]， 

淘 success: function (res) { 

8 var imgPath = res.tempFilePaths[0] 
9 that.setDatal({ 

10 imgPath: imgPath 

EE }) 

Ee ); 

13 }) 

14 Fe 


上 述 代 码 第 3~13 行 表示 使 用 chooseImage0 函 数 调用 设备 照相 机 拍照 ， 或 从 本 地 相册 选 
取 照 片 ， 并 将 照片 的 存放 路 径 更 新 到 页 面 照 片 预览 区 绑 定 的 imgPath 变量 。 
@ 获取 当前 位 置 事件 。 


getLocation: function (res) { 
var that = this 
Wx.chooseLocation({ 
success: function (res) { 
Var position = res.address 
that.setData({ 
Position: position 
}) 
}, 
}) 
}, 


@ 自 定义 用 日 期 时 间 表示 的 默认 标题 函数 。 


getDefaultTitle: function () { 
Var oDate = new Date(); 
var oYear = oDate.getFullYear (); // 获 取 年 
var oMonth = oDate.getMonth() + 1; // 获 取 月 
var oDay = oDate.getDate(); // 获 取 日 
Var oHours = oDate.getHours () // 获 取 小 时 
var oMinute = oDate.getMinutes (); // 获 取 分 钟 
var oSeconds = oDate.getseconds () ; // 获 取 秒 
var oMill = oDate.getMilliseconds (); // 获 取 毫 秒 
Var defaultTitle = oYear + "" + Month + coDay + "" + caHours + "" + GMinute + " + oSeoonds; 
return defaultTitle 

}, 


@ 保存 事件 。 


和 write: function (e) { 


FFPeoowaumwwmn 
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2 Var that = this 

3 wx.ShowModal ({ 

4 title: "保存 '， 

5 content : "确认 保存 ? 

6 SUccess (res) { 

全 if (res.confirm) { // 用 户 单 击 “ 确 定 ” 按 钮 

8 if (that.data.title =='') { ， // 标 题 为 室 ， 取 日 期 时 间 值 作为 标题 
9 that .data.title = that.getDefaultTitle() 

10 } 

1E var info = { 

2 imgPath: that.data.imgPath， // 图 片 路 径 

13 position: that.data.position，// 所 在 位 置 

14 title: that.data.title, // 标 题 

下 5 content : that.data.content, // 详 细 内 容 

16 isSave: false // 没 有 收藏 (默认 ) 

hm } 

18 that.data.infos.push(info) // 将 当前 的 info 对 象 存 入 infos 数组 
19 wx.setStorageSync ("infos"，that.data.infos) // 同 步 存储 数据 

20 that.setDatal({ // 保 存 后 ， 将 位 置 、 标 题 和 内 容 清空 
FL esiEionze > 

2 EE 汪 

23 COREER 世 二 

24 }) 

25 } else if (res.cancel) { // 用 户 单 击 “ 取 消 ” 按 钮 

26 console.1og (' 用 户 单 击 取消 ') 

2 } 

28 } 

29 }) 


30 }, 


上 述 代码 第 11~17 行 用 于 将 当前 页 面 上 的 数据 组 装 成 info 对 象 ; 第 18~19 行 代码 表示 将 
info 对 象 存 入 infos 数组 后 ， 将 infos 数组 存 入 本 地 缓存 (如 果 已 有 ， 则 覆盖 原 有 数据 )。 

另外， 获取 标题 事件 getTitle0 和 获取 详细 内 容 事 件 getContent0) 比 较 简 单 ， 不 再 次 述 。 本 
案例 的 详细 代码 ， 读 者 可 以 参阅 代码 包 lesson5_camera 文件 夹 中 的 内 容 。 

收藏 页 面 的 设计 与 实现 

(1) 收藏 界面 设计 。 

从 图 5.8、 图 5.9 可 以 看 出 ， 整 个 收藏 页 面 以 flex 布局 的 column 方式 显 
示 每 一 条 随手 拍 信息 (包括 标题 、 内 容 描 述 、 图 片 和 取消 收藏 按钮 )， 每 一 行 
以 flex 布局 的 row 方式 显示 每 一 条 收藏 信息 的 具体 内 容 , 设计 如 图 5.8 所 示 。 
如 果 本 地 缓存 中 存放 的 随手 拍 信息 中 包含 收藏 条 目 ， 就 在 collect 页 面 上 按照 
指定 的 展示 样式 显示 信息 ， 否 则 就 在 页 面 显 示 “ 还 没有 收藏 信息 !。 

Q 页 面 结构 文件 代码 。 
<!--pages/collect/collect .wxml——> 
<view wx:if='{{isHave}}' class='container'> 
<scroll-view class='container' scroll-y> 
<block wx:for='{{infos}}'> 


<block wx:if='{{item.isSave}}'> 
<scroll-view scroll-x> 


<view class="'linecontent'> 


o wau 必 wm 


<view class="'left'> 


I 
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9 <text class='txttitle' style='color:blue'>{{item.title}}</text> 
10 <text class='txtcontent'>{{item.content}}</text> 

11 </view> 

2 <View class='img'> 

13 <image mode='aspectFit' src="{{item.imgPath}}"></image> 

14 </view> 

15 <view class='btnclass' > 

16 <button class='btn' bindtap='btnDel' data-delid='{{index}}'> 取 
消 收藏 </putton> 

7 </view> 

18 </view> 

ze </scroll-view> 

20 </block> 

ds </block> 

22 </scroll-view> 


23 </view> 
24 <view wx:else class='container'> 还 没有 收藏 信息 </view> 


上 述 代码 第 2~23 行 表 示 ， 如 果 本 地 缓存 中 存放 了 收藏 的 随手 拍 信息 ， 就 按照 图 5.11 所 
示 的 每 一 行 样式 显示 标题 内 容 描述 图 片 和 取消 收藏 按钮 .第 2 行 代码 用 条 件 泻 染 语句 wx:if 
绑 定 isHave 变量 ，isHave 的 值 由 本 页 面 的 逻辑 功能 代码 控制 ， 如 果 在 本 地 缓存 中 读 到 数据 ， 
isHave 的 值 为 true, 否则 为 false。 第 3 行 代码 用 scroll-view 组 件 的 scroll-y 属性 指定 页 面 沿 垂 
直方 向 滚动 ; 根据 图 5.11 所 示 的 设计 效果 图 ， 每 行 的 左 侧 分 上 下 两 个 部 分 ， 上 部 用 text 组 件 
绑 定 标题 ， 下 部 用 text 组 件 绑 定 内 容 描 述 〈 如 果 两 行 显示 不 下 ,用 省 略 号 代替 ); 每 行 的 中 间 
用 image 组 件 绑 定 图 片 存 放 路 径 ， 每 行 右 侧 用 button 组 件 实现 “取消 收藏 ”效果 。 由 于 正常 
情况 下 每 行 不 显示 “取消 收藏 "， 只 有 向 左 滑动 每 行 时 才 会 显示 “取消 收藏 ”按钮 ， 所 以 上 述 
代码 第 6 行 用 scroll-view 组 件 的 scroll-x 属性 指定 页 面 沿 水 平方 向 滚动 。 由 于 页 面 上 显示 信 
息 的 行 数 由 本 地 缓存 中 存放 的 收藏 信息 条 数 决定 ， 所 以 在 页 面 罗 辑 文件 代码 中 通过 读 取 本 地 
缓存 信息 的 方法 读 出 信息 后 存放 在 infos 数组 中 ， 然 后 用 上 述 第 4-5 行 代码 通过 绑 定 infos 数 
组 的 方法 进行 列表 演 染 ， 取 出 每 个 数组 元 素 的 isSave 值 ， 进 行 条 件 演 染 后 显示 在 页 面 上 。 


标题 
详细 内 容 


图 片 | | 取消 收藏 


图 5.11 “收藏 页 每 行 显示 设计 效果 图 
@ 页 面 样式 文件 代码 。 


/* pages/collect/collect .wxss */ 
/* container 样式 与 首页 页 面 样式 文件 一 样 ， 此 处 省 略 */ 
/* 每 行 的 样式 */ 
.linecontent { 
width: 100%; 
height: 200rpx; 
background: white; 
margin: 4rpx; 
9 display: flex; 
10 flex-direction: row; 


Dauw 必 sw 


} 
12 /* 每 行 左 侧 的 样式 */ 


13 
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“left { 
display: flex; 
flex-direction: column; 
width: 60%; 
flex: none; /* 容 器 项 不 放大 、 不 缩小 */ 


} 
/* 每 行 标题 的 样式 */ 
txttitle: 
margin: 10rpx; 
color: blue; 
font-size: 45rpx; 
width: 100%; 
display: -webkit-box7 
—webkit-line-clamp: 1; 
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-box-orient: vertical; 
word-break: break-all; 


} 

/* 每 行内 容 描述 的 样式 */ 

.txtcontent { 
margin: 10rpx; 
font-size: 30rpx; 
line-height: 50rpx; 
display: -webkit-box; 
-webkit-line-clamp: 2; 
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-box-orient: vertical; 
word-break: break-all; 


} 
/* 每 行 中 间 图 片 的 样式 */ 
.img { 
width: 40%; 
height: 100%; 
flex: none; 
} 
image { 
width: 200rpx; 
height: 100%; 


} 
/* 每 行 右 侧 取 消 收藏 按钮 的 样式 */ 
biEm ef 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
width: 200rpx; 
height: 100%; 
background: red; 
color: white; 
font-size: 35rpx; 


开 汪 。 微 信 小 程序 案例 开发 “区 F 


上 述 代码 第 20~31 行 用 来 设置 标题 一 行 显示 不 下 时 用 省 略 号 代替 的 样式 ， 国 
第 33~43 行 用 来 设置 内 容 描述 两 行 显示 不 下 时 用 省 略 号 代替 的 样式 。 

(2) 收藏 页 面 功能 实现 。 

启动 收藏 页 面 时 ， 首 先 读 取 本 地 缓存 ， 并 判断 本 地 缓存 有 没有 指定 key 
(本 项 目 为 infos) 的 数据 ， 然 后 根据 判断 结果 更 新 infos 的 内 容 。 在 页 面 泻 染 
时 ， 根 据 infos 数组 中 的 内 容 ， 依 据 isSave 值 判 断 是 否 要 显示 在 收藏 页 面 上 。 向 左 滑动 每 一 
行 信息 时 ， 每 一 行 右 侧 会 露出 “取消 收藏 ”按钮 ， 单 击 “ 取 消 收藏 ”按钮 ， 可 以 取消 收藏 当 
前 这 一 行 的 信息 。 

Q@ 初始 化 数据 。 


5.2.2.7 


下 data: { 

入 isHave: false，// 判 断 是 否 有 数据 ， 用 于 控制 页 面 上 的 显示 内 容 
3 infos: [] 

}, 


@ 取消 收藏 事件 。 


btnDel: function(e) { 

var delid = e.currentTarget .dataset .delid 

var infos = this.data.infos // 获 得 原 存放 数据 

infos [delid] .isSave = false 

this.setData({ 

infos: infos 

}) 

wzx.setstorageSsync ("infos"，this.data.infos) // 更 新 后 继续 保存 
}, 


单 击 “ 取 消 收藏 ”按钮 时 ， 首 先 使 用 上 述 代码 第 2 行 获得 该 按钮 绑 定 的 data-delid， 以 便 
将 存放 随手 拍 信息 infos 数组 中 对 应 元 素 的 isSave 修改 为 false( 即 不 再 收藏 该 条 信息 ); 然后 
更 新 页 面 绑 定 的 infos 数组 内 容 ， 最 后 将 infos 数组 内 容重 新 保存 在 本 地 缓存 中 。 

另外 ， 监 听 页 面 显 示 事 件 与 首页 页 面 的 监听 显示 事件 完全 一 样 ， 不 再 歼 述 。 本 案例 的 详 
细 代 码 ， 读 者 可 以 参阅 代码 包 lesson5_camera 文件 夹 中 的 内 容 。 


9 5.3 “文本 阅读 器 的 设计 与 实现 


随 着 社会 的 发 展 ， 人 们 对 阅读 的 要 求 越 来 越 高 ， 对 环境 保护 越 来 越 重视 。 伴 随 着 现代 科 
技 的 发 展 ， 电 子 书 应 运 而 生 。 可 以 想象 ， 电 子 书 凭 借 其 成 本 低廉 、 便 于 携带 和 交流 方便 的 特 
点 ， 势 必 成 为 人 们 阅读 的 主要 媒介 。 目 前 ， 越 来 越 多 的 用 户 把 手机 、 平 板 电 ”加 。 
脑 等 智能 终端 设备 作为 便携 式 的 电子 阅读 设备 。 本 节 以 开发 设计 一 个 基本 微 各 
信 平 台 的 文本 阅读 器 小 程序 为 例 ， 介 绍 微 信 小 程序 读 写本 地 文件 的 方法 。 人 
5.3.1 ”预备 知识 | 
文件 操作 API 


文件 操作 在 小 程序 开发 中 主要 应 用 于 从 网 络 下 载 文件 或 从 指定 位 置 选 择 文件 ， 并 作为 本 
地 文件 保存 等 场景 ， 这 个 保存 的 本 地 文件 可 以 是 本 地 缓存 文件 ， 也 可 以 是 本 地 用 户 文件 。 微 


onoODpre 
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信 小 程序 开发 框架 提供 了 保存 文件 、 获 取 文 件 信息 、 获 取 本 地 文件 列表 、 获 取 本 地 文件 信息 、 
删除 本 地 文件 、 打 开 文 档 等 操作 文件 的 API。 下 面 以 实现 图 5.12 所 示 小 程序 为 例 ， 介 绍 这 些 
API 的 使 用 方法 。 
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文件 操作 API 

选择 文件 

保存 文件 
获取 文件 信息 


获取 本 地 文件 列表 
获取 本 地 文件 信息 
删除 本 地 文件 
打开 文档 


图 5.12 文件 API 应 用 


单 击 图 5.12 所 示 界 面 的 “选择 文件 ”按钮 ， 弹 出 “打开 ”对 话 框 ， 在 对 话 框 中 选择 需要 
操作 的 文件 ， 单 击 “ 保 存 文件 ”按钮 ， 将 打开 的 文件 保存 到 本 地 ， 单 击 “ 获 取 文 件 信 息 ” 按 
钮 ， 可 以 获得 文件 (文件 可 以 是 临时 文件 ， 也 可 以 是 本 地 文件 ) 的 大 小 和 摘要 ， 单 击 “ 获 取 
本 地 文件 列表 ”可 以 获得 保存 在 本 地 的 文件 列表 信息 (包括 本 地 路 径 、 文 件 保存 时 的 时 间 戳 、 
大 小 ); 单 击 “ 获 取 本 地 文件 信息 ”， 可 以 获得 本 地 的 文件 信息 〈 包 括 文件 保存 时 的 时 间 戳 、 
大 小 ); 单 击 “ 删 除 本 地 文件 ”按钮 ， 可 以 删除 指定 的 本 地 文件 ， 单 击 “ 打 开 文 档 ”按钮 ， 可 
以 在 新 的 页 面 打开 指定 类 型 的 文档 (包括 Word、Excel、PowerPoint 和 PDF 类 型 )。 页 面 结构 
文件 代码 如 下 : 
<button bindtap='selectFile'> 选 择 文件 </button> 
<button bindtap='saveFile'> 保 存 文件 </button> 
<button bindtap='getFileInfo'> 获 取 文件 信息 </button> 
<button bindtap='getLocalFileList'> 获 取 本 地 文件 列表 </button> 
<button bindtap='getLocalFileInfo'> 获 取 本 地 文件 信息 </button> 


<button bindtap='delLocalFile'> 删 除 本 地 文件 </button> 
<button bindtap='openLocalFile'> 打 开 文 档 </button> 


另外 ， 罗 辑 代码 文件 中 定义 了 如 下 两 个 变量 ， 分 别 用 于 存放 选择 的 待 操作 文件 路 径 和 保 
存 到 本 地 的 文件 路 径 ， 代 码 如 下 : 


vawmwwmnb 


草 data: { 

2 oFileName: '',// 选 择 的 临时 文件 路 径 
3 sFileName: '',// 保 存 的 本 地 文件 路 径 
4 }, 


(1) wx.saveFile(Object objecb: 保存 文件 到 本 地 ， 该 文件 为 本 地 缓存 文件 。object 参数 
及 功能 说 明 如 表 5-13 所 示 。 
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表 5-13 ”object 参数 及 功能 说 明 


功 能 
需要 保存 到 本 地 的 文件 的 临时 路 径 ， 调 用 成 功 后 ， 临 时 路 径 不 可 再 用 


接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


success(res) 回 调 函数 的 res.savedFilePath 返回 文件 保存 在 本 地 的 路 径 。 因此 保存 文件 功能 
的 saveFile0 函 数 代码 如 下 : 


和 还 saveFile: function (e) { 

2 var that = this 

3 wx.saveFile({ 

4 tempFilePath: that.data.oFileName， // 临 时 文件 路 径 
5 success: function (res) { 

6 var sFileName = res.savedFilePath // 保 存 为 本 地 文件 的 路 径 
恬 that.setData({ 

8 sFileName: sFileName 

9 | 

10 } 

和 }) 

12 }, 


(2) wx.getFileInfo(Object objecb: 获取 文件 信息 ， 该 方法 既 可 以 获取 本 地 文件 信息 ， 也 
可 以 获取 本 地 临时 文件 信息 。object 参数 及 功能 说 明 如 表 5-14 所 示 。 


表 5-14 ”object 参数 及 功能 说 明 


属 性 功 能 
filePath 文件 路 径 〈 本 地 文件 、 临 时 文件 均 可 ) 
digestAlgorithm 计算 文件 摘要 的 算法 ， 默 认 值 为 md5， 也 可 以 为 shal 
success Function 接口 调用 成 功 的 回调 函数 
fail | Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


success(res) 回 调 函 数 的 res.size 返回 文件 大 小 (单位 ， 字 节 )，res.digest 返回 文件 摘要 ， 
res.errMsg 返回 调用 结果 信息 。 因 此 获取 文件 信息 功能 的 getFileInfo 0 函数 代码 如 下 : 


让 getFileInfo: function (e) { 

2 var that = this 

入 wx.getFileInfo({ 

4 filePath: that.data.sFileName, 

5 success(res) { 

6 console.1og(res.size) // 文 件 大 小 ( 字 节 ) 
7 console.log (res.digest)  // 文 件 摘 要 
8 console.log (res.errMsg) 

9 

L 

1 


}) 
}, 


oo 


(3) wx.getSavedFileList(Object object): 获取 该 小 程序 下 本 地 已 保存 的 文件 列表 。object 
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参数 及 功能 说 明 如 表 5-15 所 示 。 


表 5-15 ”object 参数 及 功能 说 明 
属 性 类 型 功 能 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 


complete 接口 调用 结束 的 回调 函数 


success(res) 回 调 函 数 的 res.fileList 返回 Object Array 类 型 的 文件 列表 (fileList 包括 filePath: 


文件 的 本 地 路 径 ，createTime: 文件 保存 时 的 时 间 戳 ，size: 文件 大 小 )。 因 此 获取 本 地 文件 
列表 功能 的 getLocalFileList 0 函数 代码 如 下 : 


芷 getLocalFileList:function(e){ 

之 wx.getSavedFileList({ 

| success (res) { 

4 console.1og(res.fileList) // 输 出 本 地 文件 列表 
与 

6 

7 


}) 
}, 


(4) wx.getSavedFileInfo(Object object): 获取 本 地 文件 信息 。object 参数 er 
及 功能 说 明 如 表 5-16 所 示 。 5.3.1.2 


表 5-16 ”object 参数 及 功能 说 明 
属 性 | 类 型 功 能 
filePath | String | 本 地 文件 路 径 
success 接口 调用 成 功 的 回调 函数 


fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


success(res) 回 调 函数 的 res.size 返回 文件 大 小 (单位 ， 字 节 )，res.createTime 返回 文件 保 
存 时 的 时 间 戳 。 因 此 获取 本 地 文件 信息 功能 的 getLocalFileInfo 0 函数 代码 如 下 : 


全 getLocalFileInfo:function(e){ 

2 var that = this 

| wx.getSavedFileInfo({ 

4 filePath: that.data.sFileName，// 本 地 文件 路 径 

5 success: function (res) { 

6 console.1log (res.createTime)  // 文 件 的 保存 时 间 截 
了 console.log(res.size) // 文 件 大 小 〈 字 节 ) 
8 

9 

者 


}) 


o 


}, 


(5) wx.removeSavedFile(Object object): 删除 本 地 文件 。object 参数 及 功能 说 明 如 表 5-17 
所 示 。 


人 人 
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表 5-17 object 参数 及 功能 说 明 


String 本 地 文件 路 径 
success | Function 接口 调用 成 功 的 回调 函数 
fail | Function 接口 调用 失败 的 回调 函数 


complete 


Function 


接口 调用 结束 的 


回调 函数 


删除 本 地 文件 功能 的 delLocalFile 0 函数 代码 如 下 : 


全 delLocalFile:function(e)f{ 

2 var that = this 

3 Wx.removeSavedFile({ 

4 filePath: that.data.sFileName， // 本 地 文件 路 径 
5 success:function (res){ 

6 console.1og('" 删 除 成 功 ! '，, res) 
浊 }, 

8 fail:function (res){ 

9 console .10g (' 删 除 失败 ! ' ,res) 
10 } 

1 }) 

2 | 


(6) wx.openDocument(Object object): 在 新 页 面 打 开 Word 类 型 、Excel 类 型 、PowerPoint 
类 型 和 PDF 类 型 的 文档 。object 参数 及 功能 说 明 如 表 5-18 所 示 。 


表 5-18 object 参数 及 功能 说 明 


属 性 功能 
filePath 本 地 文件 路 径 
fileType 指定 要 打开 的 文件 类 型 (doc、docx、xls、xlsx、ppt、pptx、pdf) 
success Function 接口 调用 成 功 的 回调 函数 
fail | Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


打开 文档 功能 的 openLocalFile 0 函数 代码 如 下 : 


1 openLocalFile:function(e){ 

2 var that = this 

急 Wx.openDocument ({ 

4 filePath: that.data.sFileName，// 本 地 文件 路 径 
局 success: function (res) { 

6 console.1og(' 打 开 文 档 成 功 ') 

法 }, 

8 fail:function(res){ 

9 console.1og(' 打 开 文档 失败 ' res) 


12 }, 


文件 管理 器 
文件 系统 是 小 程序 提供 的 一 套 以 小 程序 和 用 户 维度 隔离 的 存储 以 及 一 
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套 相 应 的 管理 接口 。 通 过 wx.getFileSystemManager0 可 以 获取 到 全 局 唯一 的 文件 系统 管理 器 ， 
所 有 文件 系统 的 管理 操作 通过 FileSystemManager 来 调用 。 代 码 如 下 : 


1 var fs = wx.getFileSystemManager( ) 


(1) 本 地 临时 文件 。 

本 地 临时 文件 只 能 通过 调用 特定 接口 产生 ， 不 能 直接 写 入 内 容 。 本 地 临时 文件 产生 后 ， 
仅 在 当前 生命 周期 内 有 效 ， 重 启 之 后 即 不 可 用 。 因 此 ， 开 发 者 不 能 把 本 地 临时 文件 路 径 存 储 
起 来 下 次 使 用 。 如 果 下 次 再 使 用 ， 可 以 通过 FileSystemManager.saveFile(Object object) 函 数 或 
FileSystemManager.copyFile(Object objecb 函 数 保存 本 地 临时 文件 为 本 地 缓存 文件 或 本 地 用 户 
文件 。FileSystemManagersaveFile0 函数 的 object 参数 及 功能 说 明 如 表 5-19 所 示 ， 
FileSystemManager copyFile () 函数 的 object 参数 及 功能 说 明 如 表 5-20 所 示 。 


表 5-19 object 参数 及 功能 说 明 


属 性 | 类 型 | 功 能 
tempFilePath 临时 文件 路 径 
filePath 存储 的 目标 文件 路 径 〈 可 以 省 略 ， 若 省 略 ， 默 认 保存 为 本 地 缓存 文件 ) 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


Success(res) 回 调 函数 的 res.savedFilePath 返回 存储 后 的 文件 路 径 ， 若 指定 了 filePath 属性 
值 ， 则 返回 值 与 filePath 属性 值 相 同 。 


表 5-20 object 参数 及 功能 说 明 


属 性 | 类 型 | 功 能 
srcPath | sting | 源 文件 路 径 
destPath ”| sting | 存储 的 目标 文件 路 径 (不 能 省 略 ) 


success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


fail(res) 回 调 函数 的 res.errMsg 返回 错误 信息 。 
(2) 本 地 缓存 文件 。 
本 地 缓存 文件 只 能 通过 调用 特定 接口 产生 ， 不 能 直接 写 入 内 容 。 本 地 缓存 文件 产生 后 ， 
重启 之 后 仍 可 用 。 本 地 缓存 文件 可 以 通过 wx.saveFile() 方 法 或 FileSystemManagersaveFile() 函 
数 ， 保 存 本 地 临时 文件 获得 。 将 临时 文件 保存 为 本 地 缓存 文件 的 代码 如 下 : 
fs.saveFilel({ 
tempFilePath: that.data.oFileName，// 本 地 临时 文件 路 径 
success(res) { 
console.1og (res.savedFilePath) // 输 出 默认 保存 的 本 地 缓存 文件 路 径 


} 
}) 


Oo 必 wm 
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(3) 本 地 用 户 文件 。 

本 地 用 户 文件 是 从 1.7.0 版 本 开始 新 增 的 概念 。 它 提供 了 一 个 用 户 文件 目录 给 开发 者 ， 
开发 者 对 这 个 目录 有 完全 自由 的 读 写 权 限 。 开发 者 可 以 使 用 wx.env.USER_DATA_PATH 获取 
到 本 地 用 户 文件 目录 的 路 径 ， 并 且 对 这 个 目录 具有 完全 自由 的 读 写 权 限 。 将 临时 文件 保存 为 
本 地 用 户 文件 的 代码 如 下 : 


下 var filename='rr-txt" 

把 Var usrPath = Wwx.env.USER DATA PATH + '/' + filename 
3 fs.copyFile({ 

4 srcPath:that.data.oFileName，// 本 地 临时 文件 路 径 
5 destPath: usrPathv // 目 标 文件 路 径 

6 success (res){ 

Ny console.1log (res) 

8 }, 

8 fail (res){ 

10 console.1log (res) 

让 } 

4 }) 


(4) 读 文 件 内 容 。 
FileSystemManagerreadFile(Object objecb 函 数 用 于 读 取 本 地 文件 的 内 容 ， 
其 object 参数 及 功能 说 明 如 表 5-21 所 示 。 


表 5-21 object 参数 及 功能 说 明 
属性 | 类 型 | 功 能 
filePath 文件 路 径 
encoding “| String | 指定 读 取 文 件 的 字符 编码 〈 可 省 略 ， 若 省 略 ， 则 以 读 取 文 件 的 二 进 制 内 容 ) 
Success 接口 调用 成 功 的 回调 函数 
多 接口 调用 失败 的 回调 函数 
complete Function ”| 接口 调用 结束 的 回调 函数 


encoding 属性 值 可 以 为 ascii、 base64、 binary、 hex、 ucs2、 ucs-2、 utfl6le、 utf-16le、 utf-8、 
utf8 或 latinl 等 编码 ，success(res) 回 调 函 数 的 res.data 返回 读 出 的 文件 内 容 (string 类 型 )。 例 
如 ， 要 读 出 ucs2 编码 格式 的 文本 文件 ， 可 以 使 用 如 下 代码 : 


} 


1 fs.readFile({ 

2 filePath:that.data.readfile,， // 要 读 的 文件 路 径 
encoding: 'ucs2', // 文 件 编码 类 型 

4 success (res){ 

5 console.log(res.data) // 输 出 读 出 的 文件 内 容 
6 

了 


}) 
另外 ， 小 程序 开发 框架 还 提供 了 一 个 readFile0 函数 的 同步 版 本 方法 ， 即 
FileSystemManagerreadFileSync(string filePath, string encoding)， 其 中 filePath 指定 要 读 取 的 文 
件 的 路 径 ，encoding 指定 读 取 文件 的 字符 编码 。 
(5) 判断 文件 /目录 是 否 存 在 。 
FileSystemManager.access(Object objecb 函 数 用 于 判断 文件 /目录 是 否 存在 ， 其 object 参数 
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及 功能 说 明 如 表 5-22 所 示 。 
表 5-22 object 参数 及 功能 说 明 


属 性 


path | String 要 判断 是 否 存在 的 文件 /目录 路 径 
success 。 ”| Function | 接口 调用 成 功 的 回调 函数 
fail | Function ”| 接口 调用 失败 的 回调 函数 


complete Function 接口 调用 结束 的 回调 函数 


fail (res) 回 调 函数 的 res.errMsg 返回 错误 信息 。 要 判断 的 文件 /目录 存在 , 执行 success(res) 
回调 函数 ， 否 则 执行 fail(res) 回 调 函 数 。 代 码 如 下 : 


fs.access({ 
path:that.data.sFileName， // 要 判断 的 文件 /目录 
success:function (res){ 
console.1og ('" 若 存在 ， 则 实现 功能 ! ') 
}， 
fail:function (res){ 
console.1og (res.errMsg) 
} 


oonoODpe 


}) 


FileSystemManager.accessSync(string path) 函数 是 FileSystemManager.access() 函数 的 同 
步 版 本 ，path 指定 要 判断 是 否 存在 的 文件 /目录 路 径 。 

(6) 写 文件 内 容 。 

FileSystemManager writeFile(Object object) 函 数 用 于 向 本 地 文件 写 入 内 容 ， 其 object 参数 
及 功能 说 明 如 表 5-23 所 示 。 


表 5-23 object 参数 及 功能 说 明 


属 性 功 能 
filePath 要 写 入 的 文件 路 径 
data String/ArrayBuffer | 要 写 入 的 文本 或 二 进 制 数据 
encoding String 指定 读 取 文件 的 字符 编码 (可 省 略 ， 若 省 略 ， 则 默认 为 utf8) 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


encoding 属性 值 与 读 文件 内 容 的 readFile () 函数 一 样 ; fail (res) 回 调 函 数 的 res.errMsg 返 
回 错误 信息 。 例 如 ， 要 写 入 本 地 用 户 文件 ， 其 代码 如 下 : 


Var usrPath = wx.env.USER DATA PATH + '/rrr.txt" 
fs .writeFile({ 
filePath: usrPath, // 写 入 的 文件 路 径 
data: ' 这 是 一 个 新 写 入 的 文件 内 容 '， // 写 入 的 文件 内 容 


success: function (res) { 
console.10g(' 写 入 成 功 ! ') 

Er 

fail: function (res) { 
console.1log (res.errMsg) 


CoAoODOp 
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FileSystemManager.writeFileSync(string filePath, string|ArrayBuffer data, string encoding) 
函数 是 FileSystemManager.writeFile() 函数 的 同步 版 本 。 其 中 ，filePath 指定 要 写 入 的 文件 路 
径 ; data 指定 要 写 入 的 文本 或 二 进 制 数据 ，encoding 指定 写 入 文件 的 字符 编码 。 

(7) 文件 末尾 追加 文件 内 容 。 

FileSystemManager appendFile (Object object) 函数 用 于 向 本 地 文件 未 尾 追 加 内 容 ， 其 
Object 参数 及 功能 说 明 如 表 5-23 所 示 。 向 文件 中 追加 内 容 的 代码 如 下 : 


1 Var usrPath = wx.env.USER DATA PATH + '/rrr.txt'" 
2 fs.appendFile({ 

3 filePath: usrPath, 

4 data: ' 这 是 一 个 新 写 入 的 文件 内 容 '， 

本 success: function (res) { 

6 console.1og('" 追 加 成 功 ! ') 

了 }, 

8 fail: function (res) { 

9 console.1og (res.errMsg) 
1 } 

1 }) 


[=] 


FileSystemManagerappendFileSync(string filePath, string|ArrayBuffer data, string encoding) 
函数 是 FileSystemManager.appendFile() 函数 的 同步 版 本 。 其 中 filePath 指定 要 追加 内 容 的 文 
件 路 径 ，data 指定 要 追加 的 文本 或 二 进 制 数据 ，encoding 指定 写 入 文件 的 字符 编码 。 


5.3.2 ”文本 阅读 器 的 实现 

文本 阅读 器 小 程序 仅 有 一 个 如 图 5.13 所 示 的 页 面 ， 单 击 页 面 空白 区 域 ， 
弹出 图 5.14 所 示 的 页 面 底部 工具 栏 。 通过 页 面 底部 工具 栏 ， 可 以 实现 文本 阅 
读 器 三 个 功能 模块 ， 即 文件 模块 、 字 体 /背景 模块 和 白天 /黑夜 模块 。 


单 击 屏幕 选择 要 打开 的 文件 ! 


单 击 屏幕 选择 要 打开 的 文件 ! 


图 5.13 文本 阅读 器 页 面 图 5.14 底部 工具 栏 
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单 击 底部 工具 栏 的 “文件 ”图 标 ， 可 以 弹出 图 5.15 所 示 的 显示 效果 , 单 击 “打开 文件 ” 
可 以 弹出 “选择 文件 ”对 话 框 ， 选 中 要 打开 的 文件 ， 就 可 以 将 文件 内 容 显示 在 页 面 上 ; 也 可 
以 直接 单 击 下 方 的 文本 名 称 ， 将 文件 内 容 显 示 在 页 面 上 。 单 击 底部 工具 栏 的 “字体 ”图 标 ， 
可 以 弹出 图 5.16 所 示 的 显示 效果 ， 单 击 “ 字 号 ”后 的 按钮 ， 可 以 放大 、 缩 小 页 面 上 显示 文本 
字号 ; 单 击 “ 背 景 ”后 的 按钮 ， 可 以 设置 页 面 的 背景 色 。 单 击 底部 工具 栏 的 “夜间 ”图 标 ， 
可 以 切换 页 面 背 景色 ， 同 时 将 图 标 切 换 为 “白天 ”图 标 ; 也 可 以 单 击 “白天 ”图 标 ， 切 换 页 
面 的 背景 色 ， 并 将 图 标 切 换 为 “夜间 ”图 标 。 


儿子 的 敌人 


单 击 屏 医 选择 要 打开 的 文件 ! 


黎明 时 分 ， 震 囊 欲 玖 的 连 定 巨 响 把 正在 亚 
梦 中 挣扎 的 孙 守 妇 人 惊醒 了 。 她 折 身 坐 起 来 ， 心 
里 在 记 哆 乱 跳 ， 头 上 冷汗 洲 洲 。 窗外， 爆炸 的 
强 光 像 内 电 抖动 ， 气 澳 震 荡 窗 纸 ， 发 出 嗪 时 的 


打开 文件 
白 棉 花 
儿子 的 敌人 


图 5.15 文件 工具 效果 图 5.16 字体 工具 效果 


项 目 创建 

根据 文本 阅读 器 功能 需求 的 介绍 , 需要 在 小 程序 项 目下 创建 images 文件 夹 ， 用 于 存放 文 
本 阅读 器 小 程序 开发 中 用 到 的 图 片 资源 文件 。 在 pages 文件 夹 下 创建 1 个 文件 夹 ， 用 于 存放 
主页 页 面 (home )。 

主 界面 的 设计 

为 了 达到 文本 阅读 器 的 功能 需求 ， 把 整个 界面 设计 分 为 四 个 部 分 : 文本 内 容 显示 区 、 底 
部 工具 栏 显示 区 、 文 件 工 具 显 示 区 和 字体 工具 显示 区 。 单 击 文本 内 容 显 示 区 时 ， 可 以 通过 逻 
辑 代码 返回 的 display 属性 值 控制 底部 工具 栏 的 显示 隐藏 效果 ; 单 击 “ 文 件 ” 图 标 和 “ 字 
体 ” 图 标 时 , 也 可 以 通过 风 辑 代码 返回 的 display 属性 值 控制 文件 工具 显示 区 和 字体 工具 区 的 
显示 〔 隐 藏 ) 效果 。 

(1) 文本 内 容 显示 区 。 

Q@ 页面 结构 文件 代码 。 


1 ， <!--pages/main/main-wxml--> 

2 <view class="container" style="background:{ {bodyColor}}" bindtap= "midaction"> 
3 <!-- 主体 内 容 --> 

4 <scroll-view scroll-top="{{scrolltop}}" class="m-read-content" scroll-y 
style= "height: 100%"> 

<text style="font-size:{{initFontSize}}px;">{{txtInfo}}</text> 

6 </scroll-view> 
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汤 </view> 


上 述 代 码 第 2 行 用 bodyColor 值 控制 文本 显示 区 的 背景 色 ; 第 2 行 用 bindtap 属性 绑 定 单 
击 事件 midaction 控制 底部 工具 区 、 文 件 工具 区 和 字体 工具 区 的 显示 (隐藏 ) 效果 ; 第 4 行 用 
scrolltop 值 控制 竖 向 深 动 条 位 置 ， 第 5 行 用 initFontSize 值 控制 显示 文本 的 字号 、 用 txtInfo 
值 控制 显示 的 文本 内 容 。 

@ 页 面 样式 文件 代码 。 


下 .container { 

2 position: fixed; 
3 top:0; 

4 left:0; 

5 height: 100%; 
6 

8 

号 


width:100%; 
display: flex; 
flex-direction: column; 
align-items: center; 
10 justify-content: space-between; 
上 下 box-sizing: border-box; 
Eek 
13 .m-read-content { 
14 font-size: 14px; 
了 color: #555; 
16 line-height: 31px; 
17 padding: 15px; 
18 box-sizing: border-box; 
A : 


上 述 第 2 行 代码 的 fixed 属性 值 表示 页 面 元 素 相 对 于 窗口 固定 ， 深 动 窗口 时 并 不 会 使 页 
面 移动 ;第 14 行 代码 和 第 15 行 代码 分 别 指定 了 页 面 上 显示 内 容 的 字号 和 字 的 颜色 。 

(2) 底部 工具 栏 显示 区 。 

Q 页 面 结 构 文件 代码 。 


下 <view class="bottom-nav" style="display:{{nav}}"> 

2 <view class="item" bindtap="openaction"> 

| <view class="item-warp"> 

4 <view class="icon" style="'background:url (/images/list.jpg) '></view> 
5 <view class="icon-text"> 文 件 </view> 

6 </view> 

2 </view> 

8 <view class="item" bindtap="zitiaction"> 

9 <view class="item-warp"> 

10 <view class="icon" style="'background:url (/images/font.jpg) '></view> 
下 <view class="icon-text"> 字 体 </view> 

12 </view> 

3 </view> 

14 <view class="item" bindtap="dayNight"> 

Ls <View class="item-warp" wzx:if="{{daynight}}"> 

16 <view class="icon" style="'background:url (/images/sun.jpg) '></view> 
FE <view class="icon-text"> 白 天 </view> 

18 </view> 


9 <view class="item-warp" wx:else> 
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20 <view class="icon" style="'background:url (/images/dark.jpg) '></view> 
2 <view class="icon-text"> 夜 间 </view> 

22 </view> 

2 </view> 


24 </view> 


上 述 代码 第 1 行 用 nav 值 控制 底部 工具 栏 显示 区 的 显示 (隐藏 效果 ; 第 2 行 、 第 8 行 
和 第 14 行 用 bindtap 属性 绑 定单 击 事件 openaction、zitiaction 和 dayNight 用 于 分 别 实现 “ 文 
件 ”“ 字 体 ” 和 “白天 /黑夜 ”的 控制 功能 ， 第 15~22 行 代码 使 用 条 件 泻 染 语 名 控制 在 底部 工 
具 栏 显示 “白天 /黑夜 ”的 图 标 和 文字 。 

@ 页 面 样式 文件 代码 。 


1 .bottom-nav { 

之 position: fixed; 

3 bottom: Opx; 

4 height: 70px; 

本 background: #2989C3; 
6 width: 100%; 

7 opacity: 1; 

8 z-index: 10004; 

9 margin: 10 auto; 


10 text-align: center; 
1 
12 .item { 


.3 display: inline-block; 
14 width: 32%; 
1 color: #fff; 


16 text-align: center; 
17 margin-top: 15px; 
ph : 


19 .item-warp { 
20 width: 26px; 


2 下 margin: 0 auto; 
22 Position: relative; 
2 


>» SEO 
25 width: 28px; 
26 height: 22px; 


2 
28 .icon-text { 
29 position: absolute; 


30 top: 25px; 
3 font-size: 12px; 
S20 


上 述 代码 第 4 行 用 height 属性 设 定 底部 工具 栏 高 度 为 70px; 第 8 行 用 
z-index 属性 设 定 元 素 的 堆 闭 顺序， 值 越 大 ， 越 显示 在 前 面 ， 第 13 行 用 于 指 
定 块 级 元 素 能 够 在 同一 行 显示 。 

(3) 文件 工具 显示 区 。 

Q 页 面 结 构 文件 代码 。 


1 <view class="top-file-pannel" style="display:{{wenjian}}"> 
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<view class="child-mod" bindtap='openfile'> 打 开 文 件 </view> 
<View style="'background:#E0E3DA; width:100%; height:5rpx;'></view> 
<!-- 在 文件 列表 中 显示 已 保存 过 的 文本 --> 
<scroll-view scroll-top="{{scrolltop}}" scroll-y style="height: 90%"> 

<view wx:for="{{novelinfo}}"> 

<view bindtap='menufile' data-fileno='{{index}}' style=' width:100%; 

height:50rpx;'>{{item.txtname}}</view> 
8 </view> 
过 </scroll-view> 
10 </view> 


上 述 代 码 第 1 行 用 wenjian 值 控制 文件 工具 显示 区 的 显示 (隐藏 ) 效果 ; 第 2 行 用 bindtap 
属性 绑 定 单 击 事件 openfile， 用 于 打开 选择 文件 的 对 话 框 ; 第 3 行 画 一 条 分 隔 线 ; 第 5~9 行 
使 用 列表 泻 染 语句 ,把 已 保存 的 本 地 文件 名 称 按 列 表 方 式 显示 出 来 ， 其 中 novelinfo 为 用 于 存 
放 本 地 文件 的 存放 路 径 和 文件 名 称 的 数组 。 

@ 页 面 样式 文件 代码 。 


.top-file-pannel { 
position: fixed; 
bottom: 70px; 
height: 115px; 
background: #2989C3; 
width: 100%; 
Color: yellow; 
z-index: 10004; 

} 

10 .child-mod { 

EE padding: 3px 10px; 

12 margin-top: 15px; 

(a 


上 述 代 码 第 3 行 用 bottom 属性 设 定 文本 工具 显示 区 的 底部 位 置 在 70px 处 ， 以 便于 底 间 
工具 栏 不 重 悉 。 

(4) 字体 工具 显示 区 。 

@ 页 面 结构 文件 代码 。 


<view class="top-nav-pannel" style="display:{{ziti}}"> 
<view class="child-mod"> 
<view class="span"> 字 号 </view> 
<text bindtap="fontBigAction"> 变 大 </text> 
<text style="margin-left:10px;" bindtap="fontSmallRaction"> 缩 小 </text> 
</view> 
<view class="child-mod"> 
<view class="span"> 背 景 </view> 
<block wx:for="{{colorArr}}" wzx:for-item="color" wx:key="this"> 
10 <view class="bk-container {{ num 一 index?'bk-container-current':''}}" data-num= 
"{{index}}" style="background-color:{{color.value}}" bindtap="bgChange"></view> 
站 </block> 
I </view> 
13 </view> 


上 述 代码 第 1 行 用 ziti 值 控制 字体 工具 显示 区 的 显示 《隐藏 效果 ; 第 2 行 、 第 4 行 分 


AMD 


on 


oo 


别 用 bindtap 属性 绑 定 单 


上 导 
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有 件 fontBigAction、fontSmallAction， 用 于 控制 字号 变 大 和 变 小 ; 


第 9~11 行 用 列表 泻 染 语句 把 colorArr 数组 中 的 背景 颜色 分 别 列 出 来 ， 其 中 第 10 行 根据 选择 
的 背景 色 控制 背景 色 的 样式 。 


FFPeoowauwm 必 wm 上 
睫 口 


WwwmwmwwmbpbpbpppnbnpnohFhphprhFrhPp hp HP 
外 四 必 RDeomowamnucewnhreoomwaouwmcew 


o wau 必 wm 


@ 页 面 样式 文件 代码 。 


.top-nav-pannel { 
position: fixed; 
bottom: 70px; 
height: 1l5px; 
background: #2989C3; 
width: 100%; 
color: yellow; 
z-index: 10004; 

} 

.top-nav-pannel text { 
background: none; 


border: lpx #8c8c8c solid; 


padding: 5px 40px; 
Color: yellow; 
display: inline-block; 
border-radius: 16px; 

} 

.span { 
display: inline-block; 
padding-right: 20px; 
padding-left: 10px; 


. 

.bk-container { 
position: relative; 
height: 30px; 
width: 30px; 
background: #fff; 
border-radius: 15px; 
display: inline-block; 
vertical-align: -14px; 
margin-left: 7px; 

} 

.bk-container-current { 


border: lpx #ff7800 solid; 


} 


功能 实现 
(1) 初始 化 数据 。 


data: { 
bodyColor: '#a4a4ad4', // 背 景色 
txtInfo: ' 单 击 屏 幕 选择 要 打开 的 文件 ! '， ”// 文 件 内 容 
initFontsize: '14°', // 字 号 
colorArr: [{ // 字 体 属性 数组 
value: '#f7eee5'， // 背 景色 (页面 的 背景 色 ) 
name: ' 米 白 '， // 名 称 
ome // 前 景色 〈 字 显示 的 颜色 ) 
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对 ys 

10 /** 省 略 其 他 字体 属性 值 */ 

11 { 

12 value: "#0f1410"， 

过 name: ' 冷 黑 '， 

14 font: '#4e534f" 

.3 }]， 

16 _num: 1, // 选 中 的 字体 属性 数组 下 标 
4 nav: 'none', // 控 制 底部 工具 栏 
18 wenjian: 'none', // 控 制 文件 工具 栏 
19 ziti: "none', // 控 制 字体 工具 栏 
20 daynight: true, // 白 天 /黑夜 

21 scrolltop: 0, // 垂 直 滚 动 条 位 置 
22 novelinfo: [] // 本 地 保存 文件 数组 
VA) }, 


上 述 代码 第 10 行 省 略 了 其 他 字体 的 属性 值 ， 其 定义 格式 类 似 ， 不 再 袭 述 。 读 者 可 以 参 
阅 代码 包 lesson5_readtxt 文件 夹 中 的 内 容 。 
(2) 单 击 页 面 区 域 显示 《隐藏 ) 底 部 工具 栏 。 


i midaction: function () { 
bp if (this.data.nav == 'none') { 
村 this.setData({ 

4 nav: "block' 

5 }) 

6 yoelse { 

入 this.setData({ 

8 nav: 'none', 

9 Zitis "none", 

10 wenjian: 'none' 

4 }) 

2 } 

3 上 


上 述 代 码 表 示 单 击 页 面 区 域 时 , 如 果 底 部 工具 栏 没 有 显示 , 即 nav 的 值 为 none, 则 将 nav 
的 值 设 置 为 block, 即 显示 底部 工具 栏 。 如 果 底 部 工具 栏 处 于 显示 状态 , 则 将 nav、ziti、 wenjian 
的 值 设置 为 none， 即 底部 工具 栏 、 字 体 工 具 显示 区 、 文 件 工具 显示 区 都 隐藏 。 

(3) 选择 并 打开 文件 。 

在 本 功能 模块 中 ， 单 击 图 5.15 所 示 的 “打开 文件 ?， 即 可 打开 选择 文件 对 话 框 ， 从 对 话 
框 中 选择 临时 文件 后 ， 调 用 wx.saveFile() 函数 ， 将 临时 文件 作为 本 地 缓存 文件 保存 ， 并 调用 
FileSystemManagerreadFile0) 函 数 读 出 文件 内 容 。 


openfile: function (res) { 
var that = this 
wx.chooseImage ({ 
Success: function (res) { 
var tempFilePaths = res.tempFilePaths // 返 回 本 地 临时 文件 路 径 列表 
wx.saveFile({ 
tempFilePath: tempFilePaths[0], // 需 要 保存 文件 的 临时 路 径 
success: function (res) { // 返 回 文件 的 保存 路 径 
var savedFilePath = res.savedFilePath // 文 件 的 保存 路 径 
Var fs = WX-getFileSystemManager () 


ownamoummwnhP 


© 
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ET fs.readFile({ 

12 filePath: savedFilePath， 

13 encoding: 'ucs2', 

14 Success (res) { 

15 var txtpath = savedFilePath // 文 件 路 径 
16 var txtdetail = res.data 1/ 文件 内 容 
17 var txtname = txtdetail.split(/[\r\n]/) // 按 回 车 分 隔 成 数组 
18 Var temp = { 

19 txtpath: txtpath, // 保 存 文件 路 径 

20 txtname: txtname[0] // 保 存 文件 名 

21 } 

22 that .data.novelinfo.push (temp) 

2 that.setDatal({ 

24 txtInfo: res.data, 

25 novelinfo: that.data.novelinfo, 

26 scrolltop: 0 

名 }) 

28 } 

29 }) 

30 Vx 

3 complete: function (res) { 

32 } 

33 }) 

34 } 

35 }) 

36 }, 


上 述 第 4~30 行 代码 表示 调用 wx.chooseImage() 函 数 选择 文件 成 功 后 , 将 临时 文件 保存 为 
本 地 文件 (文件 路 径 保存 在 savedFilePath 中 )， 然 后 调用 readFile() 方 法 读 出 文件 内 容 ， 并 指 
明文 件 编码 为 ucs2， 本 案例 中 使 用 的 文本 文件 编码 格式 统一 为 ucs-2 格式 ， 文 件 内 容 格式 如 
图 5.17 所 示 ， 第 一 行为 文本 的 “标题 ”， 即 小 说 名 称 。 其 中 第 17 行 表示 读 出 文件 内 容 后 ， 按 
回 车 换行 符 将 文件 内 容 分 隔 成 数组 元 素 , 并 将 保存 在 本 地 的 本 地 文件 路 径 、 小 说 名 称 (tktname 
数组 中 的 第 一 个 元 素 ) 组 合成 对 象 ， 放 入 novelinfo 数组 中 。novelinfo 数组 中 元 素 的 txtname 
属性 用 于 在 图 5.15 的 “打开 文件 ”下 方 显 示 文 件 列表 〈 即 已 保存 过 的 小 说 名 称 )。 


日 白 棉花 .txt 


让 棉花 二 一 小 说 名 称 
围绕 着 棉花 的 闲 言 碎 语 


人 类 栽培 棉花 的 历史 您 入， 据说 可 上 潮 一 万 年 
我 们 高 密 县 是 中 国 小 有 名 气 的 产 棉 县 ， 因 为 棉 1 
关于 棉花 我 自 认为 是 半 个 专家 ， 从 种 植 到 加 工 
农历 三 月 中 旬 ， 由 于 太阳 开始 向 我 们 靠拢 ， 地 i 
铁 反 办 悠悠 荡 过 去 ， 牛 的 蹄 印 被 把 平 ， 松 软 的 - 
春天 ， 我 们 赶 着 牛 反 地 时 ， 村 时 的 女人 就 国 坐 1 
有 一 天 ， 郭 老 肚子 让 我 去 找 保管 员 领 二 两 廊 给 
5 


“本 二 押 作 于 宠 仁 丛 乱 肌 一 


图 5.17 文本 内 容 格式 


(4) 单 击 列表 中 的 文件 并 打开 文件 。 

在 本 功能 模块 中 ， 单 击 图 5.15 所 示 文 件 列表 中 的 某 个 文件 后 ， 首 先 通过 
e.currentTarget.dataset.fileno 获取 从 页 面 返回 的 该 文件 在 novelinfo 数组 中 的 下 标 , 然后 根据 下 
标 ， 从 novelinfo 数组 中 获取 该 文件 的 存放 路 径 ， 最 后 使 用 FileSystemManagerreadFile() 方 法 
读 出 文件 内 容 。 


微 信 小 程序 案例 开 改装 们 


证 menufile:function(e){ 

2 var that = this 

名 Var fileno = e.currentTarget .dataset.fileno 
4 Var fs = wx.getFileSystemManager () 

而 fs.readFile({ 

6 filePath: that.data.novelinfo[fileno] .txtpath, 
2 encoding: 'ucs2', 

8 success(res) { 

9 Var txtdetail = res.data 

10 Var txtname = txtdetail.split(/[\r\n]/) 
11 that .setDatal({ 

下 2 txtInfo: res.data, 

13 scrolltop: 0 

EE 用 }) 

15 } 

16 }) 

下 Fr 


(5) 字号 变 大 /字号 变 小 。 
在 本 功能 模块 中 ， 单 击 图 5.16 所 示 字 号 “ 变 大 ”后 ， 若 当前 字号 值 不 大 于 20， 则 将 当 
前 字号 值 加 1， 即 initFontSize 值 加 1。 


让 fontBigAction: function () { 

2 var that = this; 

3 if (that .data.initEFontSize > 20) { 

4 return; 

5 } 

6 Var Fontsize = parseInt (that.data.initFontSize) 
注 that .setData({ 

8 initFontSize: Fontsize += 1 

9 }) 

1 


上 口 


}， 


单 击 图 5.16 所 示 字 号 “ 变 小 ”后 ， 若 当前 字号 不 小 于 12， 则 将 当前 字号 值 减 1， 即 
initFontSize 值 减 1。fontSmallAction0 函 数 的 功能 代码 与 上 述 代 码 类 似 ， 不 再 袭 述 。 读 者 可 以 
参阅 代码 包 lesson5_readtxt 文件 夹 中 的 内 容 。 

(6) 选择 背景 色 。 

在 本 功能 模块 中 , 单 击 图 5.16 所 示 背 景 后 的 “背景 "图例 后 , 首先 通过 e. target.dataset.num 
获取 页 面 返回 该 背景 图 例 在 colorArr 数组 中 的 下 标 ， 然 后 根据 下 标 ， 从 colorArr 数组 中 获取 
该 背景 图 像 的 背景 颜色 值 ， 最 后 更 新 文本 显示 区 的 背景 。 
bgchange: function (e) { 

this .setData({ 
num: e.target.dataset .num, 
bodyColor: this.data.colorArr[e.target.dataset.num] .value 


}) 
}, 


(7) 切换 白天 夜晚 。 
在 本 功能 模块 中 ， 单 击 底部 工具 栏 区 的 “夜间 (白天 )”， 可 以 实现 底部 图 标 和 文字 的 切 


On 必 wm 
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换 ， 同 时 指定 相对 应 的 文本 显示 区 背景 色 。 
1 dayNight: function () { 

2 if (this.data.daynight == true) { 
3 this .setData({ 

4 daynight: false, 

Ss bodyColor: "'#e9dfc7', 

6 num: 1 

7 }) 

8 } else { 

9 this.setDatal({ 

10 daynight: true, 

下 有 bodyColor: '#000°', 

过 num: 5 

3 }) 

14 人 

15 ]} 


另外 , 单 击 底部 工具 栏 的 “文件 ”显示 隐藏) 文件 工具 显示 区 、 隐 藏 字体 工具 显示 区 ， 
或 单 击 底部 工具 栏 的 “字体 ”显示 《隐藏 )》 字 体 工具 显示 区 、 隐 藏 文件 工具 显示 区 的 功能 代 
码 与 单 击 页 面 区 域 显示 【隐藏 ) 底部 工具 栏 代码 类 似 ， 不 再 袭 述 。 读 者 可 以 参阅 代码 包 
lesson5 readtxt 文件 夹 中 的 内 容 。 

至 此 ， 文 本 阅读 器 全 部 设计 和 开发 完毕 ， 读 者 可 以 根据 本 案例 的 设计 思路 进行 扩展 ， 进 
一 步 提升 文本 阅读 器 的 功能 。 


Ss 


本 章 主 要 介绍 了 数据 缓存 API、 图 片 API、 位 置 API 和 文件 API 的 用 法 ， 并 结合 两 个 项 
目 案例 阐述 了 它们 的 应 用 场景 和 方法 。 读 者 通过 对 本 章 的 学 习 ， 能 够 掌握 基本 的 数据 存储 知 
识 ， 对 编写 一 些 数据 密集 型 的 软件 很 有 帮助 。 


多 媒体 应 用 开发 


在 移动 终端 迅速 发 展 的 今天 ， 一 个 明显 的 趋势 是 它们 支持 的 多 媒体 与 网 络 功能 不 断 增强 。 
用 户 经 常 使 用 手机 录制 声音 、 播 放 音乐 和 观看 视频 等 。 本 章 将 结合 具体 的 案例 介绍 这 些 功能 
的 开发 过 程 和 实现 方法 。 

日 杨 


。 掌握 audio、video、camera 组 件 在 音频 、 视 频 播放 和 音频 、 视 频 录 制 场景 中 的 使 用 


方法 ; 
。 掌握 动画 API、 音 频 API 和 视频 API 在 小 程序 开发 中 的 应 用 。 


SE 


音乐 和 视频 是 小 程序 使 用 中 不 可 缺少 的 部 分 ， 微 信 小 程序 开发 框架 既 提 
供 了 audio 音频 播放 组 件 、video 视频 播放 组 件 以 及 live-player 实时 音 视频 播 
放 和 live-pusher 实时 音 视频 录制 的 直播 组 件 ， 又 提供 了 能 够 进行 灵活 应 用 开 
发 的 音频 和 视频 API。 由 于 直播 权限 暂时 只 针对 国内 社交 、 教 育 、 医 疗 、 金 
融 、 汽 车 、 政 府 及 工具 类 的 特定 主体 的 小 程序 开放 ， 并 且 需 要 先 通过 相关 类 
目的 审核 ， 再 在 小 程序 管理 后 台 的 “开发 ”一 “接口 设置 ”中 自助 开通 直播 组 件 的 权限 才 可 
以 使 用 ， 即 直播 权限 需要 相关 资质 的 账号 才能 开通 ， 所 以 本 书 不 作 介绍 。 

微 信 小 程序 开发 框架 提供 用 于 播放 音频 的 API 包含 以 下 两 种 : 

(1) 普通 音频 API: wx.createInnerAudioContext( ) API 用 于 获取 InnerAudioContext 实 
例 ; wx.createAudioContext() API 用 于 获取 AudioContext 实例 ，AudioContext 实例 可 以 通过 
id 与 一 个 audio 组 件 绑 定 ,然后 通过 它 操作 对 应 的 audio 组 件 .audio 组 件 用 于 播放 音频 资源 ， 
从 1.6.0 版 本 开始 ， 官 方 已 不 再 对 其 进行 维护 ， 所 以 推荐 开发 者 使 用 能 力 更 强 的 
wx.createInnerAudioContext ( ) API。 

(2) 背景 音频 API: wx.getBackgroundAudioManager( ) API 用 于 获取 BackgroundAudioManager 
实例 ， 即 获取 全 局 唯一 的 背景 音频 管理 器 。 小 程序 切入 后 台 后 ， 如 果 音 频 处 于 播放 状态 ， 可 以 继 
续 播 放 。 但 是 后 台 状 态 不 能 通过 调用 API 来 操作 音频 的 播放 状态 。 

微 信 小 程序 开发 框架 提供 的 video 组 件 用 于 播放 视频 , 并 提供 了 wx.createVideoContext() 
API 获取 VideoContext 实例 ，VideoContext 实例 可 以 通过 id 与 一 个 video 组 件 绑 定 ， 然 后 
通过 它 操作 对 应 的 video 组 件 。 

微 信 小 程序 开发 框架 提供 了 wx.getRecorderManager( ) API 获取 全 局 唯一 的 录音 管理 器 
RecorderManager 实例 ， 通 过 调用 RecorderManager 实例 的 相应 方法 来 控制 录音 过 程 。 
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微 信 小 程序 开发 框架 提供 了 camera 组 件 实现 系统 相机 功能 ， 并 提供 
wxX.createCameraContext( ) API 获取 CameraContext 实例 ，CameraContext 实例 可 以 与 页 面 内 
唯一 的 camera 组 件 绑 定 ， 然 后 通过 它 操作 对 应 的 camera 组 件 。 


人 9 6.2 影音 盒子 ( 音乐 播放 器 ) 的 设计 与 实现 


随 着 移动 网 络 技术 的 飞速 发 展 ， 移 动 智 能 终端 软件 和 硬件 不 断 更 新 换代 ， 人 们 越 来 越 多 
地 使 用 移动 终端 来 享受 移动 网 络 提供 的 各 种 各 样 的 信息 服务 。 近 年 来 ， 流 媒体 技术 向 移动 终 
端的 延伸 和 微 信 小 程序 的 出 现 ， 极 大 地 促进 了 移动 终端 音频 、 视 频 应 用 的 发 展 ， 使 人 们 能 够 
随时 随地 通过 移动 网 络 播放 、 录 制 和 上 传 音乐 、 视 频 信 息 。 本 节 及 6.3 节 将 通过 影音 盒子 案 
例 的 实现 过 程 介绍 利用 微 信 小 程序 开发 框架 提供 的 组 件 和 API 开 发 设计 基于 加 
微 信 平台 的 音 视频 播放 器 和 音 视频 录制 器 的 小 程序 。 


6.2.1 ”预备 知识 


普通 音频 API 62.11 

由 于 官方 已 不 再 维护 播放 音频 资源 的 audio 组 件 ， 所 以 本 书 仅 介绍 能 力 更 强 的 wx. 
createInnerAudioContext( ) API。wx.createInnerAudioContext( ) 用 于 创建 内 部 audio 上 下 文 
JInnerAudioContext 实例 对 象 ，InnerAudioContext 实例 对 象 的 常用 属性 及 功能 说 明 如 表 6-1 所 
示 ，InnerAudioContext 实例 对 象 的 常用 方法 及 功能 说 明 如 表 6-2 所 示 ，InnerAudioContext 实 
例 对 象 支持 播放 的 音频 格式 如 表 6-3 所 示 。 创 建 mnerAudioContext 实例 对 象 的 代码 如 下 : 


1 Var iAudioContext = wx.createInnerAudioContext () 


表 6-1 InnerAudioContext 实例 对 象 的 常用 属性 及 功能 


属性 功 能 
sre 音频 资源 的 地 址 ， 自 2.2.3 开始 支持 云 文件 人 D 
startTime 开始 播放 的 位 置 ( 单 位 ，s)， 默 认为 0 


autoplay 是 否 自动 播放 ， 默 认为 false 
loop 是 否 循环 播放 ， 默 认为 false 
是 否 遵循 系统 静音 开关 ， 村 true。 当 此 参数 为 false 时 ， 即 使 用 户 打开 
了 静音 开关 ， 也 能 继续 发 出 声 


obeyMuteSwitch | Boolean 


volume Number | 音量 值 ， 范 围 为 0~1， 也 1 
duration Number | 当前 音频 的 长 度 〈 单 位 : s) 
currentTime Number | 当前 音频 的 播放 位 置 〈 单 位 : s) 
paused Boolean | 当前 是 否 处 于 暂停 或 停止 状态 
buffered Number | 音频 缓冲 的 时 间 点 


表 6-2 InnerAudioContext 实例 对 象 的 常用 方法 及 功能 


方 法 参数 类 型 功 能 
play() 填 播放 音频 资源 
pause( ) 无 暂停 播放 ， 暂 停 后 的 音频 再 播放 ， 会 从 暂停 处 开始 播放 
stop( ) 无 停止 播放 ， 停 止 后 的 音频 再 播放 ， 会 从 头 开 始 播放 
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续 表 
方 法 参数 类 型 功 能 
seek(position) Number 跳 转 到 指定 位 置 
destroy( ) 十 销毁 当前 InnerAudioContext 实例 对 象 
onCanplay(callback) Function 监听 音频 进入 可 播放 状态 的 事件 
offCanplay(callback) Function 取消 监听 音频 进入 可 以 播放 状态 的 事件 
onPlay(callback) Function 监听 音频 播放 事件 
offPlay(callback) 取消 监听 音频 播放 事件 
onPause(callback) 监听 音频 暂停 事件 
offPause(callback) 取消 监听 音频 暂停 事件 
onStop(callback) 监听 音频 停止 事件 
offStop(callback) Function 取消 监听 音频 停止 事件 
onEnded(callback) Function 监听 音频 自然 播放 至 结束 的 事件 
offEnded(callback) 取消 监听 音频 自然 播放 至 结束 的 事件 
onTimeUpdate(callback) 监听 音频 播放 进度 更 新 事件 
offTimeUpdate(callback) | Function 取消 监听 音频 播放 进度 更 新 事件 
onError(callback) Function 监听 音频 播放 错误 事件 
offError(callback) Function 取消 监听 音频 播放 错误 事件 
监听 音频 加 载 中 事件 。 当 音频 因为 数据 量 不 足 ， 需 要 停 下 来 加 


onWaiting(callback) Function 载 时 触发 


offWaiting(callbacl) 取消 监听 音频 加 载 中 事件 
onSeeking(callback) 监听 音频 进行 跳 转 操作 的 事件 
offSeeking(callback) 取消 监听 音频 进行 跳 转 操作 的 事件 
onSeeked(callback) 监听 音频 完成 跳 转 操作 的 事件 
offSeeked(callbacl) 取消 监听 音频 完成 跳 转 操作 的 事件 


格 式 | ios | Andod | 格式 | Android 
V m4a 


下 面 以 实现 图 6.1 所 示 的 音乐 播放 小 程序 为 例 ， 介 绍 InnerAudioContext 实例 及 与 其 相关 
的 属性 和 方法 在 实际 开发 中 的 用 法 。 

单 击 图 6.1 所 示 界 面 的 “播放 ”“ 和 暂停 ” “停止”"“ 重 放 ” 按 钮 ， 可 以 对 音乐 的 播放 情况 进 
行 控 制 ， 同 时 “进度 条 ”的 进度 和 “当前 时 间 ” 能 根据 播放 进度 进行 改变 。 拖 动 进度 条 时 ， 
也 能 够 改变 当前 的 音乐 播放 进度 和 当前 的 时 间 显 示 效 果 。 其 效果 如 图 6.2 所 示 。 页 面 结构 文 
件 代码 如 下 : 
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eeeee WeChats 39% mm wesee WeChats 15:14 


© 言 志 播放 


当前 时 间 : 00:00 总 时 间 : 06:41 当前 时 间 : 03:28 总 时 间 : 06:41 
国 国 四 国 国 国 四 加 


图 6.1 音乐 播放 小 程序 (1) 图 6.2 音乐 播放 小 程序 (2) 


1 <slider bindchange="sliderChange" backgroundColor="#ff00ff" block-color= 
"#00ffff" block-size="12px" step="2" value="{{offset}}" max="{ {max}}" 
selected-color="#4c9dee"></slider> 

2 <view class='pttime'> 

六 <view> 当 前 时 间 : {{currentTime}j</view> 

4 <view> 总 时 间 : {{totalTime}}</view> 

5 </view> 

6 <view class='ptbtn'> 

7 <button type="primary" bindtap="audioPlay"> 播 放 </button> 

8 <button type="primary" bindtap="audioPause"> 暂 停 </button> 

9 <button type="primary"” bindtap="audioStop"> 停 止 </button> 

10 <button type="primary" bindtap="audioAgain"> 重 放 </button> 

11 </view> 


上 述 代码 第 1 行 用 bindchange 属性 绑 定 拖 动 进度 条 事件 sliderChange( ), step 属性 指定 进 
度 条 的 改变 步 长 为 2，value 属性 绑 定 offset 变量 表示 进度 值 ，max 属性 绑 定 max 变量 表示 进 
度 条 的 最 大 值 。 为 了 达到 图 6.1 的 显示 效果 ， 还 需要 定义 页 面 样式 文件 ， 其 代码 如 下 : 


.pttime { 

display: flex; 

flex-direction: row; 
justify-content: space-between; 
margin: 20rpx; 

} 

.ptbtn { 

display: flex; 

flex-direction: row; 
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由 于 InnerAudioContext 实例 对 象 在 当前 页 面 函数 中 都 要 求 可 以 直接 调用 ， 所 以 需要 在 
page 顶部 定义 其 为 全 局 变量 ， 此 处 定义 的 变量 名 为 iAudioContext。 另 外 ， 逻 辑 代码 文件 中 定 
义 了 如 下 4 个 变量 ， 分 别 用 于 存放 音乐 播放 的 当前 时 间 、 播 放 音 乐 的 总 时 间 、 进 度 条 的 最 大 
值 和 进度 条 的 当前 进度 值 。 代 码 如 下 : 


3 data: { 

2 currentTime: "00:00", // 当 前 时 间 

3 totalTime: "00:00", // 总 时 间 

4 max: 0, // 进 度 条 最 大 值 
5 offset: 0 // 进 度 条 当前 值 
全 中 


(1) 页 面 加 载 监听 事件 。 
一 旦 运行 音乐 播放 小 程序 ,首先 需要 创建 mnerAudioContext 实例 对 象 ， 并 初始 化 待 播放 
音乐 文件 的 链接 地 址 ， 页 面 加 载 监听 事件 代码 如 下 : 


加 微 信 小 程序 案例 开发 过 们 


1 


3 


onLoad: function (options) { 


iAudioContext = wx.createInnerAudioContext () ; // 实 例 化 InnerAudioContext 对 象 
var audiosrc = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb .mp3 


?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&Vkey=6292F51E1E384E06D 
CBDC9RAB7C49FD713D632D313AC4858BRACB8DDD29067D3C601481D36E62053BF8DFERAF74C0R5 
CCFADD6471160CAF3E6A&fromtag=46" 


iAudioContext.src = audiosrc // 设 定 音 乐 文件 链接 地 址 
述 代码 第 3 行 的 音乐 文件 链接 地 址 可 以 根据 实际 情况 设置 。 


) 播放 按钮 事件 。 
击 “ 播放 ?按钮 时 , 首先 运行 音乐 播放 进度 更 新 事件 ,该 事件 主要 通过 InnerAudioContext 
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属性 获得 当前 音乐 播放 的 总 时 间 、 正 在 播放 音乐 的 当前 时 间 ， 并 将 获取 的 时 间 按 照 


“00:00” 格 式 进行 处 理 ， 然 后 调用 InnerAudioContext 的 play( ) 方 法 播放 音乐 ， 最 后 实现 音乐 
进行 seek 操作 事件 和 音乐 自然 播放 结束 事件 。 播 放 按钮 事件 代码 如 下 : 


audioPlay: function (e) { 


(3 
单 


/** 音 乐 播放 进度 更 新 事件 */ 
iAudioContext.onTimeUpdate(() => { 
var duration = iAudioContext.duration;  // 获 取 当 前 音乐 的 总 时 间 


var max = parseInt (duration); // 总 时 间 
Var tmin = "0" + parseInt (max / 60); // 分 钟 
Var tsec = max % 60; // 秒 


LE (tsec < LO0y TE 
Esec = “0” + tsecs 
}; 


Var totalTime = tmin + ':' + tsec; /1/00:00 格式 
var offset = iaudiocontext.currentTime;// 获 取 正 在 播放 音乐 的 当前 时 间 
var currentTime = parseInt (offset); // 当 前 时 间 


/** 处 理 当 前 时 间 按 00:00 格式 显示 代码 与 第 6~10 行 类 似 ， 此 处 略 */ 
Var currentTime = cmin + ':' + Csec; 
this.setData({ 

currentTime: currentTime， // 更 新 当前 时 间 


totalTime: totalTime, // 更 新 总 时 间 
max: max, // 更 新 进度 条 最 大 值 
offset: offset // 更 新 进度 条 当前 值 
}) 
}) 
iAudioContext .play() // 开 始 播 放 


/** 音 乐 进行 Seek 操作 事件 */ 
iAudioContext.onSseeking(() => { 
var i = iAudioContext.currentTime 
}) 
/** 音 乐 自然 播放 结束 事件 */ 
iAudioContext.onEnded(()=>{ 
this .setData({ 


offset: 0, // 更 新 进度 条 当前 值 为 0 
currentTime: "00:00" // 更 新 当前 时 间 


]) 
]) 
}， 


) 暂停 按钮 事件 。 
击 “ 和 暂停 ”按钮 时 ， 直 接 调 用 InnerAudioContext 的 pause( ) 方 法 暂停 当前 正在 播放 的 


音乐 ， 和 暂停 后 的 音乐 再 播放 时 ， 会 从 暂停 处 开始 播放 。 和 暂停 按钮 事件 代码 如 下 : 


全 第 6 章 多 媒体 应 用 开发 轩 宝 


1 audioPause: function (e) { 
站 iAudioContext .pause() // 暂 停 播放 
3 1}, 


(4) 停止 按钮 事件 。 

单 击 “ 停 止 ”按钮 时 ， 直 接 调用 InnerAudioContext 的 stop( ) 方 法 停止 当 
前 正在 播放 的 音乐 ,然后 更 新 进度 条 的 值 和 当前 时 间 。 停 止 后 的 音频 再 播放 ， 
会 从 头 开始 播放 。 停 止 按钮 事件 代码 如 下 : 


1 audiostop: function (e) { 

2 iAudioContext .stop() // 停 止 播放 

3 this.setDatal({ 

4 offset: 0, // 更 新 进度 条 当前 值 
5 currentTime: '00:00"' // 更 新 当前 时 间 

6 ]) 

Ts 


(5) 重 放 按钮 事件 。 

单 击 “ 重 放 ” 按 钮 时 ， 首 先 需 要 调用 InnerAudioContext 的 seek( ) 方 法 ， 将 当前 播放 进度 
跳 转 到 0， 然 后 更 新 当前 时 间 和 进度 条 的 当前 值 ， 最 后 调用 play( ) 方 法 开始 播放 。 重 放 按 钮 
事件 代码 如 下 : 


1 audioAgain: function (e) { 

2 iAudioContext .seek (0) // 当 前 音乐 进度 跳 转 到 0 
3 this.setDatal({ 

4 offset: 0, // 更 新 进度 条 当前 值 

Ss currentTime: '00:00"' // 更 新 当前 时 间 

6 }) 

水 iAudioContext .play () // 开 始 播放 

ls 


(6) 进度 条 拖 忠 事件 。 

拖 忠 进度 条 时 ， 首 先 获取 进度 条 的 当前 值 ， 然 后 调用 InnerAudioContext 的 seek( ) 方 法 ， 
将 当前 播放 进度 跳 转 到 此 值 对 应 位 置 处 ， 以 便 音乐 从 拖 忠 到 的 目标 位 置 开始 播放 。 进 度 条 拖 
忠 事 件 代 码 如 下 : 


1 sliderchange(e) { 

Var offset = parseInt (e.detail.value); 
3 iAudioContext .seek (offset); 

0 


背景 音频 API 

背景 音频 可 以 在 小 程序 切入 后 台 后 保持 继续 播放 状态 ， 背 景 音频 对 象 
BackgroundAudioManager 实例 对 象 进行 管理 。 getBackgroundAudioManager( ) 
用 于 获取 一 个 BackgroundAudioManager 实例 对 象 . BackgroundAudioManager 
实例 对 象 的 常用 属性 及 功能 说 明 如 表 6-4 所 示 ，BackgroundAudioManager 实 
例 对 象 的 常用 方法 及 功能 说 明 如 表 6-5 所 示 ， 其 代码 如 下 : 


村 Var bgAudioManager= wzx.getBackgroundAudioManager( ) 
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表 6-4 BackgroundAudioManager 实例 对 象 的 常用 属性 及 功能 


属 性 类 型 功 能 
2 音频 资源 的 地 址 ， 自 2.2.3 开始 支持 云 文件 卫 。 只 要 设置 该 属性 值 就 会 自动 开 

a Sng | 始 播放 。 目 前 仅 支持 m4a、aac、mp3 和 wav 格式 
startTime Number | 开始 播放 的 位 置 〈 单 位 : s)， 默 认为 0 
title String 音频 资源 标题 ， 必 填 
epname String 音频 资源 专辑 名 称 
singer String 音频 资源 歌手 名 称 
coverImgUrl | String 原生 音频 播放 器 背景 图 的 URL 
webUrl String 页 面 链 接 URL 
protocol String 音频 资源 协议 ， 默 认为 HITP。 设 置 hls 可 以 支持 播放 HLS 协议 的 直接 音频 
duration Number | 当前 音频 资源 的 长 度 (单位 ，s) 
curentTime | Number | 当前 音频 资源 的 播放 位 置 ( 单 位，s) 
paused Boolean | 当前 是 否 暂 停 或 停止 状态 
buffered Number | 音频 资源 已 缓冲 的 时 间 点 


方法 参数 类 型 功 能 
play() 无 播放 背景 音频 资源 
pause( ) 无 暂停 播放 ， 和 暂停 后 的 音频 再 播放 会 从 暂停 处 开始 播放 


| 参数 类 型 | 
无 | 
无 | 
stop() 停止 播放 ， 停 止 后 的 音频 再 播放 会 从 头 开始 播放 
seek( position) 跳 转 到 指定 位 置 ( 单 位 ，s) 
[Fi 
| Fonction 
Fetion | 


onCanplay(callback) Function 监听 背景 音频 进入 可 播放 状态 的 事件 


onPlay(callback) Function 监听 背景 音频 播放 事件 
onPause(callback) Function 监听 背景 音频 暂停 事件 
onStop(callback) 监听 背景 音频 停止 事件 
onEnded(callback) Function 监听 背景 音频 自然 播放 至 结束 的 事件 
onTimeUpdate(callback) | Function 监听 背景 音频 播放 进度 更 新 事件 ， 只 有 小 程序 在 前 台 时 会 回调 
onError(callback) Function 监听 背景 音频 播放 错误 事件 
ee ; 监听 背景 音频 加 载 中 事件 。 当 音频 因为 数据 量 不 足 , 需要 停 下 来 
onWaiting(callback) Function 加 载 时 触发 
onSeeking(callback) Function 监听 背景 音频 进行 跳 转 操作 的 事件 
onSeeked(callback) Function 监听 背景 音频 完成 跳 转 操作 的 事件 
onNext(callback) Function 监听 用 户 在 系统 音乐 播放 面板 单 击 下 一 首 事件 〈 仅 iOS) 
onPrev(callback) Function 监听 用 户 在 系统 音乐 播放 面板 单 击 上 一 首 事件 〈 仅 iOS) 


从 微 信 客户 端 6.7.2 版 本 开始 , 若 需 要 在 小 程序 切换 到 后 台 后 仍 能 继续 播放 音频 ， 需要 在 
appjson 中 配置 requiredBackgroundModes 属性 。 开 发 版 和 体验 版 上 可 以 直接 生效 ， 正 式 版 还 
需 通过 审核 。requiredBackgroundModes 属性 用 于 声明 需要 后 台 运 行 的 能 力 ， 类 型 为 数组 。 目 
前 仅 支 持 audio 项 目 ， 即 后 台 音乐 播放 。 在 appjson 文件 中 设置 的 代码 格式 如 下 


a 
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2 "pages": ["pages/index/index"], 
3 "requiredBackgroundModes": ["audio"] 
本 


下 面 以 实现 图 6.3 所 示 的 背景 音乐 播放 小 程序 为 例 介绍 BackgroundAudioManager 实例 及 
与 其 相关 的 属性 和 方法 在 实际 开发 中 的 用 法 。 
当 背 景 音 乐 播放 小 程序 运行 后 ， 单 击 “ 播 放 ” 按 钮 ， 可 以 将 要 播放 的 音频 相关 信息 〈 歌 
名 称 、 歌 手 姓 名 等 ) 显示 在 页 面 的 对 应 位 置 ， 单 击 “ 和 暂停 ”按钮 ， 可 以 暂停 当前 正在 播放 
的 音乐 ， 单 击 “ 停 止 ”按钮 ， 可 以 结束 当前 音乐 播放 。 当 一 首 歌 播放 完毕 ， 可 以 自动 切换 到 
下 一 首 歌 播放 ， 并 更 新 相关 信息 。 
图 6.3 是 背景 音乐 播放 小 程序 在 模拟 器 中 的 运行 效果 ， 图 6.4 是 背景 音乐 小 程序 在 真 机 
上 切换 到 后 台 的 运行 效果 。 
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歌曲 名 称 : 屋顶 。 歌手 姓名 : 周杰伦 温 岚 


7 月 11 日 星期 四 
己 雍 年 六 月 初 九 


图 6.3 背景 音乐 播放 小 程序 模拟 器 效果 6.4 背景 音乐 播放 小 程序 真 机 效果 
图 6.3 的 页 面 样式 文件 代码 与 图 6.2 的 页 面 一 样 ， 页 面 结构 文件 代码 如 下 : 


<view class='pttime'> 
<view> 歌 曲名 称 : { {songName}}</view> 
<view> 歌 手 姓 名 : { {singerName }</view> 
</view> 
<view class='ptbtn'> 
<button type="primary" bindtap="audioPlay"> 播 放 </button> 
<button type="primary"” bindtap="audioPause"> 暂 停 </button> 


<button type="primary" bindtap="audiostop"> 停 止 </button> 
</view> 
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由 于 BackgroundAudioManager 实例 对 象 在 当前 页 面 函数 中 都 需要 直接 调用 , 所 以 在 页 面 
顶部 定义 其 为 全 局 变量 ， 代 码 如 下 : 


i Var bgAudioManager = wx.getBackgroundAudioManager () 


另外 ， 风 辑 代 码 文件 中 定义 了 如 下 4 个 变量 ， 分 别 用 于 存放 当前 正在 播放 歌曲 的 名 称 、 
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歌手 姓名 、 要 播放 的 歌曲 及 当前 播放 歌曲 的 索引 号 。 代 码 如 下 : 


data: { 
2 songName: "", // 歌 曲名 称 
3 singerName: "", // 歌 手 姓 名 


musics: [{ title: "屋顶 '，epname: ' 受 回 温 '，singer: ' 周 杰 伦 温 岗 '， 
coverImgUrl: 'http://qukufile2.qianqian.com/data2/pic/3607b47f39b47al9cd32c 
abcd90fld4b/614329449/614329449.jpg'"， src: "http://audio01.dmhmusic.com/71 
53_T10046221359 128 4 1 0 sdk-cpm/0207/M00/66/34/ChR47Fsrnn6Aa2kfAE8NyU6LX-— 
0162 .mp3?xcode=3e3c40fc7ea049224bedd0fac8e9e13639d0be2'}, {title: ' 无 问 西 东 '， 
epname : ' 无 问 西 东 '，singer: ' 主 菲 ', coverImgUrl: 'http://qukufile2.qianqian.com/ 
data2/pic/4865939a77b87edc79789df87b6f22d8/569080825/569080825.png', STCS 
"http://audio01.dmhmusic.com/71 53 T10045931166 128 4 1 0 sdk-cpm/0206/MOO0/ 
6RA/94/ChR47FsYGhORek8PREbCWGVjpuY962.mp3?xcode=a70f15140ed9bdfe4bf0f55d89bd 
SI2CECEET7LRR le 
5 index: 0 // 歌 曲 索引 号 
6 }, 


上 述 第 4 行 代码 定义 了 1 个 musics 数组 ， 数 组 中 存放 需要 播放 的 每 个 音乐 文件 的 信息 ， 
包括 歌曲 名 称 (title)、 专辑 名 称 (epname)、 歌手 姓名 (singer)、 背景 图 片 地 址 (coverImgUrl)、 
歌曲 资源 地 址 〈src)。 本 案例 中 存放 了 2 首 音乐 文件 的 信息 ， 一 首 歌曲 播放 完毕 后 能 够 自动 
切换 到 下 一 首 继续 播放 ， 如 果 已 经 为 最 后 一 首 ， 则 可 以 循环 到 第 一 首 继续 播放 。 

(1) 初始 化 背景 音频 事件 。 

由 于 单 击 “ 播 放 ” 按 钮 播放 歌曲 和 一 首 歌曲 播放 完毕 后 能 够 自动 播放 下 一 首 歌曲 ， 也 就 
是 在 “播放 ”按钮 事件 和 歌曲 播放 自然 完毕 后 都 需要 初始 化 背景 音频 信息 ， 所 以 将 初始 化 背 
景 音频 信息 单独 定义 为 一 个 playSongs( ) 方 法 ， 其 代码 如 下 : 


1 playSongs: function (index) { 

网 bgaudioManager .title = this.data.musics[index] .title 

3 bgAudioManager.epname = this.data.musics[index] .epname 

4 bgAudioManager.singer = this.data.musics[index] .singer 

5 bgAudioManager.coverIimgUrl = this.data.musics[index] .coverImgUrl 
6 bgAudioManager.src = this.data.musics [index] .src 

有 bgaudioManager.play() 

8 this.setData({ 

9 index: index， // 更 新 歌曲 索引 号 

10 songName: this.data.musics[index] .title, // 更 新 页 面 歌曲 名 称 
人 singerName: this.data.musics[index] .singer  ”// 更 新 页 面 歌手 姓名 
12 }) 
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上 述 第 2~6 行 代码 根据 index 参数 值 ， 从 musics 数组 中 取出 相关 歌曲 的 音频 信息 ， 包 括 
歌曲 名 称 、 专 辑 名 称 、 歌 手 姓 名 、 背 景 图片 地 址 及 歌曲 资源 地 址 ， 并 分 别 指定 给 
BackgroundAudioManager 实例 对 象 bgAudioManager 的 相关 属性 。 

(2) 页 面 加载 监 听 事 件 。 

一 旦 运行 背景 音乐 播放 小 程序 ， 需 要 加 载 BackgroundAudioManager 实例 对 象 的 
onEnded( )， 以 便 歌曲 自然 播放 完毕 后 加 载 下 一 首 歌曲 继续 播放 ， 其 代码 如 下 : 


1 onLoad: function (options) { 

2 bgAudioManager.onEnded(() => { 

3 Var i = ++this.data.index 

4 if (i >= this.data.musics.length) { 
与 i=0 

6 
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7 this.playSongs (i) 


上 述 第 4-6 行 代码 表示 下 一 首 歌曲 的 索引 号 i 如 果 超 过 musics 数组 长 度 ， 则 将 索引 号 i 
值 设置 为 0， 然后 根据 i 值 调用 初始 化 背景 音乐 事件 playSongs( )， 以 便 加 载 并 播放 下 一 首 背 
景 音乐 。 
(3) 播放 按钮 事件 。 
播放 按钮 事件 比较 简单 ， 直 接 根据 歌曲 的 索引 号 index 调用 初始 化 背景 音乐 事件 
playSongs( )， 其 代码 如 下 : 
1 audioPlay: function (e) { 


2 this.playSongs (this.data.index) 
A 


暂停 按钮 事件 和 停止 按钮 事件 直接 调用 BackgroundAudioManager 实例 对 象 的 pause( ) 方 
法 和 stop( ) 方 法 ， 其 代码 如 下 : 


1 ”/** 暂 停 按钮 事件 */ 
之 audioPause: function (e) { 
3 bgaudioManager.pause () 
4 }, 
§ /** 停 止 按钮 事件 */ 
6 audioStop: function (e) { 
7 bgaudioManager.stop () 
8 }, 

动画 API 


微 信 小 程序 通过 animation 实例 对 象 显示 动画 ， 其 动画 效果 的 实现 通常 以 回 q 
下 面 的 步骤 完成 。 也 
(1) 创建 动画 实例 对 象 。 ? 
微 信 小 程序 开发 框架 提供 wx.createAnimation(Object object) 方 法 创建 一 个 回 


animation 实例 对 象 。object 参数 及 功能 说 明 如 表 6-6 所 示 。 6.2.1.4 
表 6-6 object 参数 及 功能 说 明 
属 性 | 类 型 功 能 
duration | number | 动画 持续 时 间 (单位 ，ms)， 默 认为 400 
timingFunction | string 。 | 动画 效果 ， 其 值 如 表 6-7 所 示 ， 默 认为 linear 
delay | namber | 动画 延迟 时 间 〈 单 位 ，ms)， 默 认为 0 


设置 transform-Origin 的 属性 值 ， 表 示人 允许 更 改 转 换 元 素 的 位 置 ， 默 认为 


transform-Origin | string 50%、 50%. 0 


表 6-7 timingFunction 属性 值 


属 性 功 能 
linear | 动画 从 头 到 尾 的 速度 是 相同 的 

ease | 动画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 
ease-in | 动画 以 低速 开始 


ease-in-out | 动画 以 低速 开始 和 结束 
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续 表 
属 性 功 能 
ease-out 动画 以 低速 结束 
step-start 动画 第 一 帧 就 跳 至 结束 状态 ， 直 到 结束 
step-end 动画 一 直 保持 开始 状态 ， 最 后 一 帧 跳 到 结束 状态 


例如 ， 创 建 一 个 持续 5 秒 、 从 头 到 尾 速 度 相同 的 动画 代码 如 下 : 


Var animation = wx.createAnimation({ 
duration:5000, // 动 画 持 续 
timimgFunction:'linear' 

}) 


(2) 调用 动画 实例 方法 描述 动画 。 
动画 实例 可 以 调用 animation 对 象 的 方法 来 描述 动画 ， 包 括 样式 、 旋 转 、 缩 放 、 偏 移 、 倾 
斜 和 和 矩阵 变形 等 设置 不 同 动画 类 别 的 方法 。animation 方法 及 功能 说 明 如 表 6-8 所 示 。 


表 6-8 animation 实例 对 象 的 常用 方法 及 功能 


类 别 


旋转 


缩放 


偏 移 


透明 度 ， 


大 人 
Em 
Em 
Em 
友信 
ET 


长 人 


点 


rotate(deg) 180 


在 
oteviGe | Nonber | 在 
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// 从 头 至 尾 速度 相同 


功 能 
参数 范围 为 0~1 


如 果 传 入 Number 类 型 ， 
如 果 传 入 Number 类 型 ， 
如 果 传 入 Number 类 型 ， 
， 如 果 传 入 Number 类 型 ， 
， 如 果 传 入 Number 类 型 ， 则 默认 单位 为 px 
如 果 传 入 Number 类 型 ， 则 默认 单位 为 px 
顺 时 针 旋转 一 个 deg 角度 ，deg 范围 为 -180~ 


则 默认 单位 为 px 
则 默认 单位 为 px 
则 默认 单位 为 px 
则 默认 单位 为 px 


旋转 一 个 deg 角度 ，deg 范围 为 -180 ~ 180 
旋转 一 个 deg 角度 ，deg 范围 为 -180 ~ 180 


ET TT TD 


rotate3d(x,y,z,deg) 


在 (%y,z) 位 置 旋转 一 个 deg 角度 ，deg 范围 为 -180 ~ 180 


sal 当 仅 有 SX 参数 时 , 表示 在 义 轴 、Y 轴 同 时 缩放 sx 倍数 ， 
在 立轴 缩放 sy 倍数 

scaleX(sx) 在 义 轴 缩放 sx 倍 

scaleY(sy) 在 立轴 缩放 sy 倍 

scaleZ(sz) 在 Z 轴 缩 放 sz 倍 

scale3d(sx,sy,sz) 在 和 X 轴 缩放 sx 倍 ， 在 Y 轴 缩 放 sy 倍 ， 在 Z 轴 缩放 sz 倍 


只 a 
translate(sx,[sy]) 加 


个 参数 时 ， 表 示 在 X 轴 偏 移 sx; 两 个 参数 时 ， 


表示 在 X 轴 偏 移 sg， 在 Y 轴 偏 移 sy， 单 位 均 为 px 
translateX(tx) Number 在 义 轴 偏 移 tf( 单 位 : px) 
translateY (ty) Number 在 Y 轴 偏 移 ty( 单 位 : px) 
translateZ(tz) Number 在 Z 轴 偏 移 tz( 单 位 : px) 
translate3d(tx,ty,tz) Number 在 义 轴 偏 移 世 ， 在 Y 轴 偏 移 ty， 在 Z 轴 偏 移 世 
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续 表 
类 别 方 法 功 能 
只 有 一 个 参数 时 ，Y 轴 坐 标 不 变 ，X 轴 坐 标 沿 顺 时 针 倾 

skew(ax,[ay]) 斜 ax 度 ; 当 有 两 个 参数 时 ， 分 别 在 X 轴 、 立 轴 倾 斜 ax、 
倾斜 ay 度 。ax、ay 的 范围 为 -180 ~ 180 

skewX(ax) 对 义 轴 坐标 倾斜 的 角度 ，ax 的 范围 为 -180 ~ 180 

skewY(ay) 对 立轴 坐标 倾斜 的 角度 ，ay 的 范围 为 -180 ~ 180 
矩阵 | matrix (a,b,c,d,tx,ty) 同 transform-function matrix 
变形 | matrix3d() 同 transform-function matrix3d 

例如 : 


。 旋转 同时 放大 对 象 ， 代 码 如 下 。 


1 animation.rotate(60) .scale (2) .step () 


。 先 旋 转 后 放大 对 象 ， 代 码 如 下 。 


1 animation.rotate (60) .step() .scale(3，3) .step () 


。 先 旋转 放大 ， 后 平移 ， 代 码 如 下 。 


下 animation.rotate(60) .scale(3，3) .step() 
六 animation.translate (100, 100).step({ duration: 2000 }) 


animation 对 象 允许 将 多 个 动画 方法 追加 在 同一 行 代码 中 , 表示 同时 开始 这 一 组 动画 内 容 ， 
调用 动画 操作 方法 后 ， 最 后 需要 调用 step( ) 方 法 ， 表 示 一 组 动画 ， 如 上 述 旋转 同时 放大 
对 象 的 代码 。 如 果 希 望 多 个 动画 按 顺 序 依 次 执行 ， 每 组 动画 之 间 都 需要 用 step( ) 方 法 隔 开 ， 
如 上 述 先 旋转 后 放大 对 象 的 代码 。 

Animation.step(Object object) 表 示 一 组 动画 完成 。 可 以 在 一 组 动画 中 调用 任意 多 个 动画 方 
法 ， 一 组 动画 中 的 所 有 动画 会 同时 开始 ， 一 组 动画 完成 后 才 会 进行 下 一 组 动画 。object 参数 
及 功能 与 wx.createAnimation(Object object) 方 法 一 样 。 

(3) 调用 export 方法 导出 动画 。 

动画 实例 可 以 调用 animation 对 象 的 export( ) 方 法 导出 动画 数据 并 传递 给 组 件 的 animation 
属性 。 

例如 ， 单 击 页 面 上 的 “创建 动画 对 象 ”按钮 ， 可 以 创建 动画 对 象 animation; 单 击 页 面 上 
的 “旋转 同时 放大 ”按钮 ， 可 以 实现 image 对 象 产生 旋转 并 同时 放大 的 动画 效果 ; 单 击 “ 先 
旋转 后 放大 ”按钮 ， 可 以 实现 image 对 象 产生 先 旋转 后 放大 的 动画 效果 ; 单 击 页 面 上 的 “ 先 
旋转 同时 放大 ， 后 平移 ”按钮 ， 可 以 实现 image 对 象 先 产生 旋转 同时 放大 ， 后 产生 平移 的 动 
画 效 果 。 页 面 结构 文件 代码 如 下 : 
<button bindtap='canimation'> 创 建 动画 对 象 </button> 
<button bindtap='rotateAscale'> 旋 转 同 时 放大 </button> 
<button bindtap='rotateLscale'> 先 旋转 后 放大 </button> 


<button bindtap='rotateTscale'> 先 旋转 同时 放大 ， 后 平移 </button> 
<image animation="'{{mAnimation}}' src='/images/play.jpg '></image> 
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上 述 第 5 行 代码 用 animation 属性 绑 定 动画 实例 对 象 mAnimation。 
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(1) 初始 化 数据 。 


i data: { 
mAnimation: {} 
3 }, 


另外 ， 还 需要 定义 一 个 页 面 全 局 变量 animation， 用 于 存放 创建 的 动画 对 象 ， 以 便 页 面 逻 
辑 代 码 随 时 可 以 调用 。 
(2) 创建 动画 对 象 事件 。 


cAnimation: function (e) { 
animation = wx.createAnimation ({ // 创 建 animation 对 象 
duration: 5000, 
timingFunction: 'ease-in-out' 
}) 
}, 


own 


(3) 旋转 同时 放大 事件 。 


1); 
}, 


rotateAscale: function (e) { 

2 animation.rotate (60) .scale (3，3) .step(); // 动 画 描述 
3 this.setDatal({ 

4 mAnimation: animation.export(), // 动 画 导 出 
5 

6 


(4) 先 旋 转 后 放大 事件 。 


rotateLscale: function (e) { 
animation.rotate(60) .step(); 
animation.scale(3, 3).step(); 
this .setData({ 
mAnimation: animation.export(), 
1); 
}, 
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(5) 先 旋 转 同 时 放大 ， 后 平移 事件 。 


rotateTscale: function (e) { 
animation.rotate(60) .scale(3, 3) .step(); 
animation.translate (100, 100).step({ duration: 2000 }); 
this.setDatal({ 
mAnimation: animation.export () 
]) 
}, 


6.2.2 ”音乐 播放 器 的 实现 


音乐 播放 器 是 影音 盒子 小 程序 的 一 个 子 功能 模块 ， 主 要 包含 音乐 榜 单 页 
面 〈 图 6.5)、 歌 手 榜 单 页面 (图 6.6)、 歌 曲 列表 页 面 (图 6.7) 和 播放 歌曲 页 
而 (图 6.8) 等 4 个 页 面 。 音乐 榜 单 页 面 、 歌 手 榜 单 页 面 和 个 人 中 心 3 个 页 面 
需要 以 tabBar 的 形式 展示 。 个 人 中 心 页 面 是 影音 盒子 小 程序 的 另 一 个 子 功能 
模块 ， 该 页 面 一 方面 用 于 呈现 录制 的 音频 文件 和 视频 文件 ， 另 一 方面 可 以 实 
现 音频 、 视 频 文件 的 录制 和 播放 等 功能 ， 后 面 章节 会 详细 介绍 。 


aawmwwmn 


三 可 
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图 6.5 音乐 榜 单 页 面 图 6.6 歌手 榜 单 页 面 
音乐 榜 单 页 面 用 于 展示 可 供用 户 选 择 的 音乐 榜 图 片 ， 本 项 目 列 出 了 “新 歌 榜 ”“ 热 歌 榜 ” 


“hit 中 文 榜 ” 和 “飙升 榜 ” 等 4 个 榜 单 供用 户 选择 ， 歌 手 榜 单 页 面 用 于 展示 可 供用 户 选 择 的 
歌手 图 片 , 本 项 目 列 出 了 20 位 歌手 供用 户 选 择 ; 单 击 音乐 榜 单 页 面 的 某 个 榜 单 或 单 击 歌手 榜 
单 页 面 的 某 个 歌手 后 ， 可 以 打开 歌曲 列表 页 面 ， 该 页 面 列 出 了 歌曲 名 称 、 专 辑 名 和 歌手 姓名 
等 信息 。 单 击 歌曲 列表 页 面 的 某 首 歌曲 后 , 打开 播放 歌曲 页 面 , 在 播放 歌曲 页 面 可 以 实现 “ 播 
放 ”“ 和 暂停 ”“ 上 一 首 ”“ 下 一 首 ”“ 单 曲 循环 ”"“ 随 机 播放 ”和 “顺序 播放 ”等 功能 。 

< 影 者 重子 OO) 影 和 生子 EO) 

二 

2 

3 . 至 1 还 有 你 


图 6.7 歌曲 列表 页 面 图 6.8 播放 歌曲 页 面 
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项 目 创建 

根据 影音 盒子 小 程序 的 音乐 播放 器 功能 需求 介绍 , 需要 在 小 程序 项 目下 创建 images 文件 
夹 ， 用 于 存放 影音 盒子 小 程序 开发 中 用 到 的 图 片 资源 文件 ， 在 pages 文件 夹 下 创建 5 个 文件 
夹 , 分 别 用 于 存放 音乐 榜 单 页 面 (home)、 歌手 榜 单 页 面 (singer)、 歌曲 列表 页 面 (songlist)、 
播放 歌曲 页 面 (play) 和 个 人 中 心 页 面 (me)。 

tabBar 项 部 标签 的 设计 

修改 appjson 全 局 配置 文件 的 tabBar 项 ， 其 详细 代码 如 下 : 


对 "tabBar": { 

学 onltionm mE 

3 a 

4 "pagePath": "pages/home/home", 
S "text": "音乐 榜 单 " 

6 Rt 

六 "pagePath": "pages/singer/singer", 
8 "text": "歌手 榜 单 " 

9 }, 

10 

了 1 "pagePath": "pages/me/me", 

]2 "textn: "个 人 中 心 " 

13 }] 

La 


上 述 第 2 行 代码 设置 position 属性 值 为 ttp， 表 示 tabBar 标签 位 于 页 面 的 项 部。 


隔音 乐 榜 单 页 面 的 设计 与 实现 RSV ID 

(1) 音乐 榜 单 界 面 设计 。 

从 图 6.5 可 以 看 出 ，4 个 代表 不 同 榜 单 的 图 片 分 两 行 放置 在 页 面 的 正中 
， 整 个 页 面 以 flex 方式 布局 ， 并 通过 样式 控制 图 片 的 显示 格式 。 

@ 页 面 结构 文件 代码 。 


<view class="container"> 
<view class="inner-box" bindtap="jumpToSongList"> 
<image src="/images/newsong.jpg" id="1"></image> 
<image src="/images/hotsong.jpg" id="2"></image> 
<image src="/images/meisong.jpg" id="18"></image> 
<image src="/images/biaosong.jpg" id="6"></image> 
</view> 
</view> 


它 


6.2.2.2 


DAMON 


上 述 代 码 第 2 行 用 bindtap 属性 绑 定 单 击 不 同 榜 单 图 片 的 jumpToSongList( ) 事 件 , 通过 第 
3~6 行 代码 中 的 id 属性 值 来 区 别 单 击 的 图 片 资源 。 本 项 目 根据 音乐 榜 单 类 型 《 即 上 述 代 码 的 
id 值 ) 访问 百度 音乐 服务 器 ， 其 地 址 为 “http://tingapi.ting.baidu.com/v1/restserver/ting?from= 
android&version=5.9.0.0&channel=ppzs&operator=0&method=baidu.ting.billboard.billList&form 
at=json&offset=0&size=20&fields=song 1d%2Ctitle%2Cauthor%2Calbum title%2Cpic big%2Cp 
ic_small%2Chavehigh%2Call rate%2Ccharge%2Chas mv_ mobile%2Clearn%2Csong source%2 
Ckorean_bb_song&type=listType”， 其 中 listType 为 音乐 榜 单 类 型 值 (1 表示 新 歌 榜 、2 表示 热 
歌 榜 、18 表示 hit 中 文 榜 、6 表示 飙升 榜 )。 

@ 页 面 样式 文件 代码 。 


和 page{ 
全 height:100%; 
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和 3 

4 .container{ 

S height:100%; 

6 display:flex; 

这 justify-content: center; 
8 align-items: center; 


10 .inner-boxt{ 

11 width:600rpx; 
es 

13 .inner-box image{ 
14 width:300rpx; 
15 height:300rpx; 
16° } 


(2) 音乐 榜 单 页 面 功能 实现 。 

影音 盒子 小 程序 运行 时 , 加 载 音乐 榜 单 页 面 (home.wxml), 通过 单 击 页 面 上 的 “新 歌 榜 ” 
“ 热 歌 榜 ”“hit 中 文 榜 ” 或 “ 疾 升 榜 ” 跳 转 到 歌曲 列表 页 面 (songlist.wxml)。 

跳 转 到 歌曲 列表 页 面 事件 。 


1 jumpTosongList: function (e) { 

2 wx.navigateTo ({ 

3 url: '/pages/songlist/songlist?1listType=' + e.target.id, 
4 }) 

5 }, 


上 述 第 2-4 行 代码 实现 带 listType 参数 的 页 面 跳 转 , listType 的 值 为 用 户 单 击 的 音乐 榜 id 
值 , 即 音乐 榜 单 类 型 , 以 便 加 载 歌 曲 列表 页 面 时 在 页 面 上 显示 相应 的 歌曲 清单 。 国名 

图 歌曲 列表 页 面 的 设计 与 实现 

(1) 歌曲 列表 界面 设计 。 

从 图 67 可 以 看 出 歌曲 列表 页 面 每 行 显示 的 歌曲 信息 包括 歌曲 名 称 、 专 辑 回 
名 及 歌手 姓名 ， 设 计 如 图 6.9 所 示 。 3 


view 一 歌曲 名 
view 一 专辑 名 view 一 歌手 姓名 


图 6.9 歌曲 列表 页 面 每 行 歌曲 信息 显示 设计 效果 图 
Q 页 面 结构 文件 代码 。 


1 <view id="{{index}}" wx:for="{{songList}]}" bindtap="chooseMusic"> 
最 <view class="song"> 

3 <view class="song-title"> 

4 {{index+1}}. {{item.title}} 
</view> 

6 <view class="song-album"> 

水 <view>{{item.album title}} </view> 
8 <view> {{item.author}}</view> 

六 </View> 

10 </view> 

11 </view> 


上 述 第 1 行 代码 用 wx:for 语句 绑 定 songList 数组 进行 列表 演 染 ，songList 数组 中 存放 歌 
的 相关 信息 ， 每 个 数组 元 素 由 表 6-9 所 示 的 主要 属性 域 组 成 。 
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表 6-9 歌曲 的 主要 属性 域 
大作 高 
we ET lm | 


@ 页 面 样式 文件 代码 。 


.song-title { 
font-size: 40rpx; 
} 
.song-album { 
display: flex; 
flex-direction: row; 
justify-content: space-between; 
font-size: 30rpx; 
color: grey7 
10 } 
11 .song { 
12 padding-left: 20rpx; 
13 padding-right: 20rpx; 
14 border-bottom: 2rpx dotted grey; 
Qua } 


上 述 第 14 行 代码 用 于 定义 每 行 歌曲 信息 的 底部 显示 点 虚线 。 

(2) 歌曲 列表 页 面 功能 实现 。 

歌曲 列表 页 面 〈songlistwxml) 加 载 时 ， 会 根据 音乐 榜 单 页 面 传递 的 榜 单 类 型 参数 值 从 
百度 音乐 服务 器 端 获 取 歌 曲 资源 信息 。 

@ 初始 化 数据 。 


1 data: { 
2 songList: []，// 存 储 歌 曲 资源 信息 的 数组 
3 1}, 
@ 页 面 加 载 监听 事件 。 
下 onLoad: function (options) { 
当 var that = this; 
| var listType = options.1istType; // 音 乐 榜 单 页 面 传递 的 参数 ( 榜 单 类 型 ) 
4 var myurl = "http://tingapi.ting.baidu.com/v1/restserver/ting?from=androidg 


version=5.9.0.0gchannel=ppzs&operator=0g&method=baidu.ting.billboard.billListgform 
at=jsongoffset=0&size=20&fields=song id%2Ctitle%2Cauthor%2Calbum title%2Cpic big% 
2Cpic small%2Chavehigh%2Call rates2Cchargegs2Chas mv mobile%2Clearn%2Csong source%® 
2Ckorean bb song&type=' + listType; 


5 Wx.request ({ // 根 据 百度 音乐 url 获取 歌曲 信息 数据 

6 url: myurl, 

也 success: function (res) { 

8 七 hat .setData({ 

a songList: res.data.song list 

10 ]) 

卫 诗 Var app = getApp(); 

二 过 app.globalData.songList = res.data.song 1ist;// 小 程序 全 局 变量 
13 } 

4 ]) 


15 }, 
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上 述 第 5~14 行 代码 根据 百度 音乐 url， 用 wx.request( ) 函 数 访 问 网 络 获取 歌曲 资源 数据 ， 
如 果 获 取 数 据 成 功 ， 则 保存 在 本 页 面 的 songList 数组 和 小 程序 的 全 局 数组 变量 songList， 以 
便 在 其 他 页 面 可 以 直接 通过 app.globalData.songList 调用 。 关 于 网 络 访问 的 内 容 , 将 在 本 书 第 
8 章 详细 介绍 。 

@ 单 击 歌曲 信息 行事 件 。 

单 击 歌曲 列表 中 的 某 首 歌曲 时 ， 会 切换 到 歌曲 播放 页 面 ， 并 将 该 歌曲 在 songList 数组 中 
的 下 标 作为 参数 传递 到 歌曲 播放 页 面 。 


1 chooseMusic: function (e) { 

区 WwWX-navVigateTo({ 

3 url: '/pages/play/play?index=' + e.currentTarget.id, 
4 寺 

5 3}, 


播放 歌曲 页 面 的 设计 与 实现 

(1) 播放 歌曲 界面 设计 。 

从 图 6.8 可 以 看 出 播放 歌曲 页 面 自 上 至 下 分 别 显示 背景 图 片 、 歌 曲名 称 、 
播放 进度 条 和 控制 播放 图 标 ， 设 计 如 图 6.10 所 示 。 


progress 


图 6.10 歌曲 播放 页 面 设计 效果 图 
QD 页 面 结构 文件 代码 。 


<view class="music"> 
<image animation="{ {animationData}}" class="bgImage" src="{{bgImage}}"> 


{{musicName}} 
</view> 
<progress stroke-width="8" percent="{{percent}}" color="green" /> 
<view class="classname2"></view> 
9 <view class="music"> 
10 <image class="con" src="{{playTypeUrl}}" bindtap="playType"></image> 
11 <image class="con" src="/images/last.png" bindtap="last"></image> 
12 <image class="con" src="{{playOrPause}}" bindtap="play"></image> 
13 <image class="con" src="/images/next.png" bindtap="next"></image> 
14 </view> 


2 
3 
4 <view class="classnamel"> 
5 
6 
了 
8 
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上 述 第 2 行 代 码 用 animation 属性 设 定 image 组 件 显示 图 片 的 动态 效果 (本 项 目 中 让 图 片 
顺 时 针 旋转 )， 第 10 行 代码 用 src 属性 设 定 用 户 选择 的 播放 类 型 而 加 载 的 图 片 〈 单 曲 循环 、 
顺序 播放 、 随 机 播放 ); 第 12 行 代码 用 src 属性 设 定 用 户 单 击 image 组 件 而 加 载 的 图 片 〈 播 
放 图 片 、 暂 停 图 片 )。 

@ 页 面 样式 文件 代码 。 


.music { 

height: 100%; 
display: flex; 
justify-content: center; 
align-items: center; 
} 
-bgImage { 

height: 400rpx; 
width: 400rpx; 
10 border-radius: 50%; 
:ht 
2 Om 和 
13 width: 100rpx; 
14 height: 100rpx; 
15 margin-left: 20rpx; 


WoONDEP 


17 .classnamel { 

18 height: 400rpx; 

19 padding-top: 50rpx; 
20 text-align: center; 
中 | 

22 .classname2 { 

23 height: 100rpx; 

24 | 


(2) 播放 歌曲 页 面 功 能 实现 。 

播放 歌曲 页 面 (playwxml) 加 载 时 ， 会 根据 歌曲 列表 页 面 传递 的 由 用 户 
所 单 击 歌曲 在 songList 数组 中 的 下 标 值 ， 从 百度 音乐 服务 器 端 获 取 本 首 歌曲 国 $ 
的 相关 资源 信息 。 每 首 歌曲 主要 包含 如 表 6-10 所 示 的 属性 域 和 子 属 性 域 。 6.2.2.5 
表 6-10 歌曲 的 主要 属性 域 和 子 属性 域 
属性 名 了 属性 说 
file_link 歌曲 文件 http 地 址 
bitrate | file_duration | 歌曲 播放 时 长 (单位 ，s) songinfo 
file size 。 | 歌曲 资源 文件 大 小 (单位 ，B) 
file_bitrate 歌曲 文件 码 率 


Q 定义 页 面 全 局 变量 。 


var that; 

Var isPplay; // 歌 曲 是 否 为 播放 状态 (true) 或 暂停 状态 (false) 
var iAudioContext = wx.createInnerAudioContext () ;// 创 建 音频 对 象 
animationContext; // 背 景 图 片 动画 

war // 背 景 图 片 旋转 角度 

var timer; // 定 时 调用 的 函数 

var songList; // 存 放歌 曲 信息 数组 
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var index; //songList 数组 元 素 下 标 

var songId; // 歌 曲 编号 id 

var tool = require('../../utils/tools.js')// 引 用 js 代码 

var arr = ['/images/shunxu.png', '/images/xunhuan.png', '/images/suiji. 
el] // 播 放 类 型 图 片 数 组 

var i = 0; // 当 前 播放 类 型 0- 顺 序 、1- 循 环 、2- 随 机 


上 述 第 10 行 代码 引用 utils 文件 夹 下 的 toolsjs 文件 ， 该 文件 中 定义 了 一 个 playMusic( ) 
方法 ， 用 于 创建 animation 对 象 ， 以 便 在 播放 页 面 中 让 背景 图 片 产 生动 画 效果 。toolsjs 文件 


码 如 下 : 
function playMusic (animationContext) { 
animationContext = wx.createAnimation({ 
duration: 100, 
timingFunction: 'linear' 
}) 
return animationContext 
} 
module.exports = { 
playMusic: playMusic 
} 


上 述 第 1~7 行 代码 定义 一 个 创建 animation 对 象 的 功能 模块 ， 第 8~10 行 通过 
module.exports 对 外 暴露 playMusic( ) 接 口 ， 以 便 其 他 模块 可 以 直接 调用 。 


@ 初始 化 数据 。 


data: { 
percent: 0, // 进 度 条 值 
musicUrl: '', // 和 歌曲 资源 文件 Url 
musicName: '', // 歌 曲名 
playOrPause: '/images/play.png',// 控 制 播放 /暂停 图 标 
animationData: {}, // 背 景 图 片 动画 
playTypeUrl: arr[i], // 播 放 类 型 0- 顺 序 、1- 循 环 、2- 随 机 
bgImage: ' // 背 景 图 片 文件 Url 


] 


@ 创建 音频 文件 方法 。 


音频 对 象 会 根据 用 户 在 歌曲 列表 页 面 单 击 选择 的 歌曲 从 百度 音乐 服务 器 端 获取 ， 或 在 播 


方法 getSongFromNet( ) 实 现 该 功能 。 其 代码 如 下 : 


getSsongFromNet: function (songId) { 


由 页 面 单 击 “ 上 一 首 ”“ 下 一 首 ” 按 钮 图 片 后 从 百度 音乐 服务 器 端 获 取 ， 所 以 本 项 目 用 自 


wx.request ({// 根 据 所 选 歌曲 的 id 向 百度 音乐 服务 器 请 求 歌 曲 的 详细 信息 
url: 'http://tingapi.ting.baidu.com/vl/restserver/ting?size=2&type= 


success: function (e) { 
that .setData({ 
musicUrl: e.data.bitrate.file link, 
bgImage: e.data.songinfo.pic big, 
percent: 0, 
musicName: e.data.songinfo.title 
}) 
iAudioContext.src = that.data.musicUrl 
that .play (); 


&format=jsongmethod=baidu.ting.song.play&songid=' + songId, 


// 音 频 文件 url 
// 背 景 图 片 
// 进 度 条 值 
// 歌 曲名 称 


// 设 置 音频 对 象 数据 源 
// 调 用 播放 按钮 图 片 事件 


本 丰 。 微 信 小 程序 案例 开发 “区 


a 1 } 

14 1) 

2 return iAudioContext // 返 回 InnerAudioContext 对 象 
Lh 


上 述 第 1 行 代码 的 songId 根据 当前 待 播放 歌曲 的 index 下 标 从 songList 数组 获得 ， 使 用 
wxrequest( ) 方 法 从 百度 音乐 服务 器 获取 待 播放 歌曲 的 音频 文件 地 址 、 背 景 图 片 地 址 及 歌曲 名 
称 等 信息 。 

@ 页 面 加 载 监听 事件 。 

播放 歌曲 页 面 加 载 时 ， 首 先 根据 从 歌曲 列表 页 面 传递 来 的 index 参数 值 获得 待 播 放歌 曲 
的 song id 值 (每 首 歌 的 唯一 编号 )， 并 存放 到 songId 中 ; 然后 根据 songId 调用 自 定义 方法 
getSongFromNet( )， 创 建 InnerAudioContext 实例 对 象 iAudioContext; 最 后 ,为 了 能 够 将 播放 
歌曲 的 进度 及 时 更 新 到 进度 条 上 、 在 当前 歌曲 播放 完毕 能 够 自动 播放 下 一 首 歌曲 ， 还 需要 实 
现 监听 音频 播放 进度 更 新 事件 onTimeUpdate( )、 监 听 音 频 播放 自然 结束 事件 onEnded( )。 


1 onLoad: function (options) { 

2 isPlay = false; 

3 n= 0 

4 that = this; 

5 index = options.index; // 从 歌曲 列表 页 面 获取 参数 值 

6 Var app = getApp(); 

了 songList = app.globalData.songList; 

8 songId = songList[index].song id; // 根 据 index 取出 歌曲 song id 值 
9 animationContext = tool.playMusic (animationContext) // 创 建 animation 对 象 
10 iAudioContext = that.getSongFromNet (songId); // 创 建 普通 音频 对 象 
了 /* 监 听 音 频 进 入 可 播放 状态 */ 

12 iAudioCcontext.onCanplay(() => { 

13 setTimeout (() => { 

14 iaudiocontext.duration // 此 句 不 能 少 ， 如 果 少 ， 则 进度 条 不 会 更 新 

15 }，1000) 

16 }) 

lg /xx 监听 音频 播放 进度 更 新 */ 

18 iAudioContext.onTimeUpdate(() => { 

19 Var mypercent = iAudioContext .currentTime / iAudioContext .duration * 100; 
20 that.setDatal({ 

20 percent: mypercent 

2 }) 

2 }) 

24 /xx 监听 音频 播放 自然 结束 */ 

25 iAudioContext.onEnded(() => { 

26 that -next (); // 播 放下 一 首 

2 }) 

28 J 


上 述 第 5 行 代 码 表示 从 歌曲 列表 页 (songlist.wxml) 获 取 传 递 到 播放 歌曲 页 的 参数 index， 
index 值 为 歌曲 列表 页 单 击 的 待 播放 歌曲 在 songList 数组 中 的 下 标 ; 第 9 行 代码 表示 调用 暴露 
接口 playMusic( ) 方 法 创建 动画 实例 对 象 animationContext; 第 26 行 代码 表示 在 当前 歌曲 播放 
自然 结束 自动 调用 “下 一 首 ”按钮 图 片 事件 next( )。 

@ 播放 /暂停 按钮 图 片 事 件 。 

歌曲 正在 播放 时 , 此 图 片 按钮 对 应 的 image 组 件 加 载 pause.png 图 片 ; 歌曲 播放 暂停 时 ， 
此 图 片 按钮 对 应 的 image 组 件 加 载 play.png 图 片 .页 面 结构 文件 中 将 该 image 组 件 的 src 属性 
绑 定 playOrPause 变量 ， 并 结合 页 面 逻 辑 代码 实现 此 效果 。 其 详细 代码 如 下 : 
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下 play: function () { 

> if (isPlay) { // 正 在 播放 

3 iAudioContext .pause () // 暂 停 

4 that .setData({ 

5 playOrPause: '/images/play.png' // 加 载 播 放 图 片 
6 }) 

yi isPlay = false; 

8 clearIinterval (timer); // 暂 停 状 态 停止 图 片 旋转 
9 } else { // 播 放 暂 停 

10 iAudioContext .play (); // 播 放 

that .setData({ 

12 playOrPause: '/images/pause.png' // 加 载 暂停 图 片 
13 }) 

14 timer = setInterval (function () { // 每 隔 50ms 旋转 1 度 
35 animationContext.rotate(1 * n++); 

16 animationContext.step(); 

Ey that.setDatal({ 

18 animationData: animationContext .export () 

FE }) 

20 0 

21 isPlay = true; 

22 } 

23  }， 


播放 类 型 按钮 图 片 事件 。 

单 击 播放 歌曲 页 面 的 播放 类 型 按钮 图 片 时 ， 在 顺序 播放 、 单 曲 循环 和 随机 播放 3 种 类 型 
间 切 换 ， 并 且 根据 切换 的 类 型 加 载 不 同 的 图 片 到 image 组 件 上 。 为 了 达到 此 效果 ， 本 项 目 用 
i 值 对 应 不 同 的 播放 类 型 ， 即 0 代表 顺序 播放 ，1 代表 单 曲 循环 ，2 代表 随机 播放 ， 单 击 播放 
类 型 图 片 时 ， 如 果 i 的 值 小 于 3， 那 么 i 值 自 增 1， 否 则 i 值 为 0。 其 详细 代码 如 下 : 


playType: function (e) { 
i++? 
if (i == 3) { 
i=0; 
} 
this.setData({ 
playTypeUrl: arr[il] 


var info = "" 


之 

3 

4 

3 

6 

7 

8 }) 
9 

10 switch (i) { 
11 

2 


cease 02 
info = ' 循 环 播放 ' 

13 break 
14 case 1: 
15 info = ' 单 曲 循环 ' 
16 break 
17 Case 2: 
18 info = ' 随 机 播放 ' 
2 break 
20 } 
21 wx.showToast ({ 
有 这 title:, infoy 
23 }) 
24 yy 


上 述 第 7 行 代码 根据 i 值 返 回 arr 数组 中 对 应 下 标的 图 片 资源 文件 路 径 ， 然 后 根据 页 面 
结构 文件 对 应 image 组 件 src 属性 绑 定 的 playTypeUrl 变量 来 实现 页 面 上 播放 类 型 图 片 的 
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切换 。 

@ 上 一 首 按钮 图 片 事件 。 

单 击 “ 上 一 首 ” 按 钮 图 片 时 ， 小 程序 会 根据 当前 选择 的 播放 类 型 (由 i 
变量 的 值 决定 : 0 一 一 顺序 播放 、1 一 一 单 曲 循环 、2 一 一 随机 播放 ) 决定 上 一 
首 歌 曲 的 songId 值 。i 的 值 为 0 时， 表示 顺 序 播放 ， 如 果 当 前 歌曲 的 index 
值 为 0, 表示 已 经 到 第 一 首 歌曲 ，songId 的 值 仍然 为 当前 index 下 标 对 应 歌曲 6.2.2.6 
的 song id 值 ， 和 否则 将 index 值 自 减 1 后 ， 再 取 对 应 下 标 歌曲 的 song id 值 。 其 详细 代码 


如 下 : 

1 last: function () { 

2 if (i = 0) { // 顺 序 播放 

3 if (index > 0) { 

4 songId = songList[--index].song id; 

与 } else { 

6 songId = songList[index] .song id; 

7 } 

8 } else if (i == 2) 1 // 随 机 播放 

9 index = parseInt (Math.random() * 20) ”// 产 生 [0,20) 随 机 整数 
10 songId = songList[index] .song id; 

11 TEST // 单 曲 循环 

于 过 songId = songList[index].song id; 

有 

14 animationContext = tool.playMusic (animationContext) 

15 that .play (); // 调 用 播放 图 片 事件 

16 iAudioContext = that.getSongFromNet (songId); 

aly clearInterval (timer); // 停 止 当前 背景 图 片 旋转 
18 7 


上 述 第 9 行 代码 表示 如 果 当 前 播放 类 型 为 随机 播放 ， 则 产生 [0,20) 间 的 随机 整数 作为 
songList 数组 的 index 下 标 ; 第 15 行 代码 表示 调用 播放 /暂停 按钮 图 片 事件 切换 图 片 ， 第 16 
行 代码 表示 创建 音频 实例 对 象 。 

“下 一 首 ” 按 钮 图 片 事件 与 “上 一 首 ” 按 钮 图 片 事件 类 似 ， 不 再 费 述 。 本 案例 的 详细 代 
人 码 ， 读 者 可 以 参阅 代码 包 lesson6_music 文件 夹 中 的 内 容 。 

图 歌手 榜 单 页 面 的 设计 与 实现 

(1) 歌手 榜 单 界面 设计 。 

Q@ 页 面 结构 文件 代码 。 

从 图 6.6 可 以 看 出 歌手 榜 单 页 面 每 行 显示 两 位 歌手 信息 (歌手 照片 、 歌 
手 姓名 )， 页 面 使 用 float 布局 实现 ， 代 码 如 下 : 


1 <view class="singers" wx:for="{{singers}]}"> 
芝 <view class="singer" id="{{item.ting uid}}" bindtap="choosesinger"> 
3 <image src="{{item.avatar middle}}"></image> 
4 <view class="singerName"> 

5 {{item.name}} 
6 </view> 
7 </view> 
8 </view> 


上 述 第 1 行 代码 用 wx:for 语句 绑 定 singers 数组 进行 列表 泻 染 ，singers 数组 中 存放 歌手 
的 相关 信息 ， 每 个 数组 元 素 由 表 6-11 所 示 的 主要 属性 域 组 成 。 
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表 6-11 歌手 的 主要 属性 域 


属性 名 i 属性 名 说 了 明 
ting uid firstchar 姓 的 首 字母 
avatar middle Songs_total 歌曲 总 数 
name albums total 专辑 总 数 


@ 页 面 结构 文件 代码 。 


.Singerst{ 
width:45%; 
float:left; 
margin-left:20rpx; 

i 

.Singers image{ 
width:100%; 
height:300rpx; 

i 


oanAODp 


(2) 歌手 榜 单 页 面 功能 实现 。 

当 加 载 歌 手 榜 单 页 面 (singerwxml) 时 ， 访 问 百度 音乐 服务 器 获取 歌手 的 信息 并 保存 在 
singers 数组 中 。 

@ 初始 化 数据 。 


工 data: { 


2 singers: [] // 歌 手 信息 数组 
3 }, 


@ 页 面 加 载 监听 事件 。 
1 onLoad: function (options) { 
2 var that = this; 
3 wx.request ({ 
4 url: 'http://tingapi.ting.baidu.com/vl/restserver/ting?from=qianqiang 
Version=2.1.0&method=baidu.ting.artist.get72HotRArtist&format=json?=1&offset 
=0&lLimit=20"， 

success: function (e) { 

that .setData({ 
singers: e.data.artist 


上 述 第 4 行 代码 表示 使 用 wx.request( ) 方 法 访问 百度 音乐 服务 器 获取 歌手 信息 ,“limit=20” 
表示 一 次 获取 20 位 歌手 信息 , 此 值 可 以 根据 实际 需要 设置 ; 第 7 行 代码 表示 将 访问 网 络 返 回 
的 e.data.artist 值 给 singers 数组 ， 以 便 将 歌手 的 照片 、 姓 名 通过 列表 演 染 显示 在 页 面 上 。 

@ 单 击 歌手 信息 事件 。 

当 用 户 单 击 歌手 榜 单 页 面 上 的 歌手 信息 时 ， 切 换 到 该 歌手 歌曲 列表 页 面 ， 并 将 该 歌手 的 
编号 ting_uid 作为 参数 uid 传递 到 歌手 歌曲 列表 页 面 (select.wxml)。 


5 chooseSinger: function (e) { 

区 wx.navigateTo ({ 

3 url: '/pages/select/select?uid=' + e.currentTarget.iqd, 
4 }) 
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5 } 


歌手 歌曲 列表 页 面 的 设计 与 实现 

歌手 歌曲 列表 页 面 结构 代码 (selectwxml) 与 歌曲 列表 页 面 (songlistwxml) 
完全 一 样 ， 由 于 根据 歌手 编号 和 歌曲 类 别 从 百度 音乐 服务 器 获取 歌曲 信息 的 
访问 接口 不 一 样 ， 所 以 此 部 分 仅 介绍 歌手 歌曲 列表 页 面 的 功能 实现 。 

@ 初始 化 数据 。 
于 data: { 


2 songList: [] ，// 存 储 歌曲 资源 信息 的 数组 
3 }, 


@ 页 面 加 载 监听 事件 。 
加 载 歌 手 歌 曲 列表 页 面 时 ， 首 先 根据 歌手 榜 单 页 面 传递 的 歌手 编号 uid 向 百度 音乐 服务 
器 获取 该 歌手 对 应 歌曲 的 信息 。 详 细 代码 如 下 : 


1 onLoad: function (options) { 

汉 var that = this; 

3 var tinguid = options.uid; // 歌 手 榜 单 页 面 传递 的 参数 (歌手 编号 ) 

4 Var myurl = 'http://tingapi.ting.baidu.com/vl/restserver/ting?from= 


qianqian&version=2.1.0&method=baidu.ting.artist.getSongList&format=json&ord 
er=2&tinguid=' + tinguid+'&offset=0glimits=50" 


wx.request ({ 

6 url: myurl, 

学 success: function (res) { 

8 that .setData({ 

9 songList: res.data.songlist 
10 }) 

i Var app = getApp(); 

12 app.globalData.songList = res.data.songlist; 
13 } 

La }) 
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上 述 第 5~14 行 代码 根据 百度 音乐 url, 用 wx.request( ) 函 数 访问 网 络 获 取 该 歌手 对 应 的 歌 
曲 资源 数据 ， 如 果 获 取 数 据 成 功 ， 则 保存 在 本 页 面 的 songList 数组 和 小 程序 的 全 局 数组 变量 
songList， 以 便 在 其 他 页 面 可 以 直接 通过 app.globalData.songList 调用 。 其 中 第 4 行 代码 的 
tinguid、offset、limits 参数 分 别 表示 歌手 编号 、 歌 曲 信 息 偏 移 量 、 获 取 歌 曲 信息 的 最 大 条 数 。 

在 歌手 歌曲 列表 页 面 单 击 歌曲 信息 行事 件 代码 与 歌曲 列表 页 面 完 全 一 样 ， 当 在 该 页 面 单 
击 某 行 歌曲 后 ， 切 换 到 播放 歌曲 页 面 。 不 再 袭 述 。 本 案例 的 详细 代码 ， 读 者 可 以 参阅 代码 包 
lesson6 mnusic 文件 夹 中 的 内 容 。 

至 此 ， 影 音 盒 子 的 音乐 播放 器 功能 设计 完成 ， 感 兴趣 的 读者 可 以 在 本 项 目 案例 的 基础 上 


增加 快 进 、 快 退 或 歌词 显示 功能 。 


本 节 以 实现 影音 盒子 的 另 一 个 功能 模块 一 一 音 视频 录制 器 的 设计 与 实现 为 例 ， 介 绍 微 信 
小 程序 中 实现 音频 、 视 频 的 录制 和 播放 的 方法 。 
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6.3.1 ”预备 知识 


录音 管理 器 

微 信 小 程序 开发 框架 提供 一 个 wx.getRecorderManager( ) 接 口 API 来 获取 
全 局 唯一 的 录音 管理 器 RecorderManager 实例 ， 通 过 调用 RecorderManager 
实例 对 象 的 方法 实现 开始 录音 、 和 暂停 录音 、 继 续 录 音 、 停 止 录音 及 监听 录音 
过 程 中 的 相关 事件 .RecorderManager 实例 对 象 常用 方法 及 功能 说 明 如 表 6-12 
所 示 。 获 取 RecorderManager 实例 对 象 的 代码 如 下 : 


1 var recorderManager = WX.getRecorderManager () 


表 6-12 recorderManager 实例 对 象 的 常用 方法 


方 法 参数 类 型 功 能 
start(object) Object 开始 录音 ，object 参数 及 功能 说 明 如 表 6-13 所 示 
pause( ) 无 暂停 录音 


resume( ) 继续 录音 
stop( ) 停止 录音 


onStart(callback) 监听 录音 开始 事件 
onPause(callback) 监听 录音 暂停 事件 
onResume(callback) 监听 录音 继续 事件 
监听 录音 停止 事件 。callback 回调 函数 返回 值 包含 3 个 属性 : 
onStop(callback) Function | tempFilePath 一 一 录音 文件 的 临时 路 径 ，duration 一 一 录音 总 时 长 
(单位 ，ms); fileSize 一 一 录音 文件 大 小 〈 单 位 : Byte) 
监听 已 录制 完 指定 帧 大 小 的 文件 事件 。 若 设置 了 frameSize， 则 
onFrameRecorded(callback) 会 回调 此 事件 
onError(callback) Function | 监听 录音 错误 事件 
监听 录音 因 受到 系统 占用 而 被 中 断 开始 事件 。 触 发 场景 : 微 信 语 
onInterruptionBegin(callback) | Function | 音 聊天 、 视 频 聊 天 。 一 旦 触发 ， 录 音 会 暂停 。pause 事件 在 此 事 
件 后 触发 


| | 路 听 录 音 中 断 结束 事件 。 收 到 interruptionBegin 事件 之 后 ， 小 各 
oe ee 序 内 所 有 录音 会 暂停 ， 收 到 此 事件 后 才 可 再 次 录音 成 功 


表 6-13 object 参数 及 功能 说 明 


属 性 类 型 功 能 
duration Number | 录音 的 时 长 (单位 ，ms)， 默 认为 600 000〈 最 大 值 ) 
sampleRate Number | 采样 频率 ， 默 认 值 为 8000 


numberOfChannels | Number | 接 录 音 通 道 数 ， 默 认 值 为 2， 即 2 个 通道 ， 也 可 以 为 1， 即 1 个 通道 
encodeBitRate Function | 编码 码 率 ， 默 认 值 为 48 000; 采样 率 与 编码 码 率 限制 如 表 6-14 所 示 


format String 音频 格式 ， 默 认 值 为 aac; 也 可 以 为 aac/mp3 

指定 帧 大 小 〈 单 位 : KB) 。 设 置 该 参数 后 ， 每 录制 指定 帧 大 小 的 内 容 后 ， 
frameSize Number | 会 回调 录制 的 文件 内 容 ; 若 不 设置 该 参数 ， 则 不 会 回调 。 暂 仅 支持 mp3 

格式 

指定 录音 的 音频 输入 源 ， 默 认 值 为 anto; 可 通过 
audioSource String wx.getAvailableAudioSources( ) 接 口 API 获取 当前 可 用 的 音频 源 。 合 法 的 


音频 源 如 表 6-15 所 示 
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表 6-14 采样 率 (sampleRate) 与 编码 码 率 (encodeBitRate) 限制 关系 表 


编码 码 率 编码 码 率 编码 码 率 
16000 ~ 48000 24000 ~ 64000 32000 ~ 128000 


16000 ~ 48000 24000 ~ 64000 32000 ~ 128000 
48000 ~ 192000 64000 ~ 320000 64000 ~ 320000 


表 6-15 音频 源 (audioSource) 的 合法 值 


值 说 明 
auto 自动 设置 ， 默 认 使 用 手机 麦克 风 ， 插 上 耳麦 后 自动 切换 使 用 耳机 麦克 风 
buildInMic 手机 麦克 风 ， 仅 限 iOS 
headsetMic 耳机 麦克 风 ， 仅 限 iOS 
mic 麦克 风 〔 没 插 耳麦 时 是 手机 麦克 风 ， 插 耳麦 时 是 耳机 麦克 风 ) ， 仅 限 Android 
camcorder 同 mic， 适 用 于 录制 音 视频 内 容 ， 仅 限 Android 
Voice_communication | 同 mic， 适 用 于 实时 沟通 ， 仅 限 Android 
Voice_ recognition 同 mic， 适 用 于 语音 识别 ， 仅 限 Android 


下 面 以 实现 图 6.11 所 示 的 录音 机 小 程序 为 例 介 绍 RecorderManager 实例 及 其 相关 方法 在 
实际 开发 中 的 应 用 。 
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录音 机 


开始 录音 


停止 录音 
播放 录音 


图 6.11 录音 机 


当 用 户 单 击 图 6.11 所 示 界 面 的 “开始 录音 ”时 ， 可 以 开启 移动 终端 设备 的 录音 功能 ， 并 
按照 设 定 的 音频 参数 进行 录音 ; 单 击 “ 停 止 录 音 ” 按 钮 时 ， 可 以 将 当前 录制 的 音频 保存 在 本 
地 缓存 中 ， 并 返回 保存 地 址 ; 单 击 “ 播 放 录音 ”按钮 时 ， 可 以 将 当前 保存 的 录音 内 容 播放 出 
来 。 页 面 结构 文件 代码 比较 简单 ， 不 再 歼 述 。 

由 于 录音 机 包含 录音 和 播放 两 个 功能 , 所 以 需要 InnerAudioContext 实例 对 象 用 于 播放 音 
频 文件 , 需要 RecorderManager 实例 对 象 用 于 录制 音频 文件 , 本 案例 定义 了 recorderManager、 
innerAudioContext 页 面 全 局 变量 来 管理 InnerAudioContext 和 RecorderManager 实例 对 象 ， 其 
代码 如 下 : 


1 var recorderManager = wx.getRecorderManager() 
2 var innerAudioContext = wx.createInnerAudioContext() 


(1) 开始 录音 按钮 事件 。 
当 用 户 单 击 “ 开 始 录音 ”按钮 后 ， 首 先 设 定 录音 参数 options， 包 括 录音 的 最 大 时 长 、 采 
样 率 、 录 音 通 道 数 、 编 码 码 率 、 音 频 格式 和 帧 大 小 ， 然 后 开启 录音 功能 。 其 代码 如 下 : 
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入 start: function () { 

这 Var options = { 

3 duration: 10000, // 指 定 录音 的 时 长 ， 单 位 ms 
4 sampleRate: 16000, // 采 样 率 

ES numberOofCchannels: 1, // 录 音 通道 数 

6 encodeBitRate: 96000, // 编 码 码 率 

汶 format: 'mp3', // 音 频 格 式 

8 frameSize: 50, // 指 定 帧 大 小 ， 单 位 KB 
Ed 

10 recorderManager.start (options); // 按 照 音频 参数 开始 录音 
11 recorderManager.onstart (() => {/ 

12 /** 监 听 开 始 录音 事件 */ 

13 1D); 

14 // 错 误 回调 

15 recorderManager.onError((res) => { 

16 /x+ 监听 录音 错误 事件 */ 

17 console.1log (res.errMsg); // 输 出 错误 信息 

18 }) 

人 }e 


(2) 停止 录音 按钮 事件 。 

当 用 户 单 击 “ 停 止 录音 ”按钮 后 ， 首 先 调用 stop( ) 方 法 停止 录音 ， 然 后 调用 监听 停止 录 
音 事件 onStop( ) 方 法 处 理 后 续 工 作 , 本 案例 将 该 方法 回调 参数 的 tempFilePath (音频 文件 临时 
保存 路 径 ) 更 新 给 页 面 变量 voicePath 〈 在 data 中 进行 定义 )。 


stop: function () { 
recorderManager.stop(); // 停 止 录音 
recorderManager.onstop((res) => { 
this.setData({ 
voicePath:res.tempFilePath  // 将 录音 文件 的 临时 路 径 更 新 给 页 面 变量 
}) 
}) 
}, 


oAONDP 


(3) 播放 录音 按钮 事件 。 


1 play: function () { 

汉 innerAudioContext.autoplay = true // 设 置 可 自动 播放 
3 innerAudioContext.src = this.data.voicepath，// 设 置 音频 数据 源 
4 innerAudioContext.onPlay(() => { 

5 /** 监 听 正 在 播放 事件 */ 

6 }) 

7 innerAudioContext .onError((res) => { 

8 /** 监 昕 播放 出 错 事件 */ 

和 a }) 

10 Px 


video 

(1) video 组 件 。 

Video 是 微 信 小 程序 开发 框架 提供 的 用 于 播放 、 和 暂停 、 停 止 视频 等 的 组 
件 ， 可 以 使 用 wx.createVideoContext( ) 接 口 API 创建 video 组 件 的 上 下 文 对 
象 VideoContext 来 控制 视频 。 该 组 件 在 页 面 结构 文件 中 引用 时 ， 可 以 使 用 
表 6-16 所 示 的 常用 属性 。 
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表 6-16 video 组 件 的 属性 及 功能 说 明 


属性 功 能 

src String 待 播放 视频 的 资源 地 址 ， 支 持 云 文件 人 D 

duration Number 视频 时 长 

odie ee 是 否 显示 默认 播放 控件 (播放 /暂停 按钮 、 播 放 进度 、 播 放 
时 间 )， 默 认 值 为 tme 

danmu-list Array.<object> | 弹 幕 列表 

i ee 0 默认 值 为 false。 只 在 初始 化 时 有 效 ， 
是 否 展示 弹 幕 ， 默 认 值 为 false。 只 在 初始 化 时 有 效 ， 不 能 

enable-danmu Boolean 动态 变更 

autoplay Boolean 是 否 自动 播放 ， 默 认 值 为 false 

muted Boolean 是 否 静 音 播放 ， 默 认 值 为 false 

initial-time Number 设 定 视频 初始 播放 位 置 ， 默 认 值 为 0 
设置 全 屏 时 视频 的 方向 ， 若 不 指定 则 根据 宽 高 比 自动 判断 。 

direction Number 其 值 可 以 为 : 0 一 一 正常 竖 向 ，90 一 一 屏幕 逆 时 针 90 度 ， 
-90 一 一 屏幕 顺 时 针 90 度 

i a 是 否 显示 播放 进度 条 ， 默认 值 为 tue。 若 不 设置 ， 宽 度 大 于 
240 时 才 会 显示 

show-fullscreen-btn Boolean 是 否 显示 全 屏 按钮 ， 默 认 值 为 true 

show-play-btn Boolean 是 否 显示 视频 底部 控制 栏 的 播放 按钮 ， 默 认 值 为 tue 

show-center-play-btn Boolean 是 否 显 示 视 频 中 间 的 播放 按钮 ， 默 认 值 为 true 


enable-progress-gesture 
enable-play-gesture 


是 否 开启 控制 进度 的 手势 ， 默 认 值 为 ve 
是 否 开启 播放 手势 ， 即 双击 切换 播放 /和 暂停， 默认 值 为 false 
当 视频 大 小 与 video 容器 大 小 不 一 致 时 ,视频 的 表现 形式 ， 


object-fit String 默认 值 为 contain (包含 )。 其 值 也 可 以 为 : 和 一 一 填充 ， 
cover 一 一 覆盖 
视频 封面 的 图 片 网 络 资源 地 址 或 云 文件 ID。 若 controls 属 
性 值 为 flse， 则 设置 poster 无 效 
show-mute-btn 是 否 显示 静音 按钮 ， 默 认 值 为 false 
title 视频 的 标题 ， 全 屏 时 在 项 部 展示 
本 播放 按钮 的 位 置 ， 默 认 值 为 bottom (controls bar 上 )。 其 值 
play-btn-position 


也 可 以 为 center 一 一 视频 中 间 


auto-pause-if-navigate 


当 跳 转 到 其 他 小 程序 页 面 时 ， 是 否 自动 暂停 本 页 面 的 视频 ， 
默认 值 为 rue 
当 跳 转 到 其 他 微 信 原生 页 面 时 ， 是 否 自动 暂停 本 页 面 的 视 


auto-pause-if-open-native Boolean 频 ， 默 认 值 为 tme 

在 非 全 屏 模 式 下 ， 是 否 开启 亮度 与 音量 调节 手势 ， 默 认 值 
vslide-gesture Boolean 

为 false 
可 村 喜 谨 扎 立 县 调 妆 ye 
ea | ee F， 是 否 开启 亮度 与 音量 调节 手势 ， 默 认 值 为 
le 

bindplay EventHandle ”| 当 开 始 /继续 播放 时 触发 play 事件 
bindpause EventHandle 当 暂 停 播放 时 触发 pause 事件 
bindended EventHandle ”| 当 播放 到 末尾 时 触发 ended 事件 
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续 表 
属 性 类 型 功 能 
iidiiiionpdall Bs 播放 进度 变化 时 触发 (每 隔 250ms 一 次 )，event.detail = 
{currentTime, duration} 

2 视频 进入 和 退出 全 屏 时 触发 , event.detail = {fullScreen, direction}， 
Bre eet on EventHandle | direetion 有 效 值 为 vertical 一 乘 直 ，horizontal 一 水 平 
bindwaiting 视频 出 现 缓冲 时 触发 
binderror 视频 播放 出 错时 触发 
bi 加 载 进度 变化 时 触发 ， 只 支持 一 段 加载 。Event.detail = 

0 {buffered} ， 百 分 比 


Video 组 件 在 页 面 上 显示 时 ， 默 认 宽 度 为 300px、 高 度 为 225px; 开发 者 也 可 以 通过 样式 
文件 (wxss) 设置 宽度 和 高 度 的 值 。 它 支持 播放 的 视频 格式 如 表 6-17 所 示 ， 支 持 的 编码 格式 
如 表 6-18 所 示 。 


表 6-17 video 支持 的 视频 格式 


格 式 iOS Android 
mp4 V x 
mov V A 
m4v x V 
3gp 

表 6-18 video 支持 的 编码 格式 

格 式 | ios | Andod | 格 式 | _ios Android 

neve | vv | v lw | > 


(2) VideoContext。 
@ wx.chooseVideo (Object object): 拍摄 视频 或 从 手机 相册 中 选 视频 。object 参数 及 功 
能 说 明 如 表 6-19 所 示 。 


表 6-19 object 参数 及 功能 说 明 


属 性 类 型 功 能 
ye ALiy 视频 选择 的 来 源 ， 默 认 值 为 [albun', 'camera]。 其 中 : album 一 一 从 相 
册 选 择 视 频 ，camera 一 一 使 用 相机 拍摄 视频 
compressed Boolean 是 否 压 缩 所 选择 的 视频 文件 ， 默 认 值 为 tue 
maxDuration Number 拍摄 视频 最 长 拍摄 时 间 (单位 ，s)， 默 认 值 为 60 
使 用 前 置 或 者 后 置 摄像 头 ， 默 认 值 为 back 后 置 )， 也 可 以 为 front 
camera String (前 置 ) 
SUccess Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 
success(res) 回 调 函 数 的 res.tempFilePath 返回 选 定 视频 的 临时 文件 路 径 、res.duration 返回 
选 定 视频 的 时 间 长 度 、res.size 返回 选 定 视频 的 数据 量 大 小 、res.height 返回 选 定 视频 的 高 、 
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res.width 返回 选 定 视频 的 宽 。 
@) wx.saveVideoToPhotosAlbum(Object object): 保存 视频 到 系统 相册 (支持 mp4 视频 格 
式 )。 调 用 前 需要 用 户 授权 scope.writePhotosAlbum。object 参数 及 功能 说 明 如 表 6-20 所 示 。 


表 6-20 object 参数 及 功能 说 明 


属 性 类 型 
filePath | string 
success | function 
fail | function 
function 


视频 文件 路 径 ， 可 以 是 临时 文件 路 径 ， 也 可 以 是 永久 文件 路 径 
接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


complete 


@) wx.createVideoContext (string id, Object this): 创建 的 VideoContext 实例 对 象 ， 可 以 
通过 id 与 一 个 video 组 件 进 行 绑 定 后 操作 对 应 的 video 组 件 。VideoContext 实例 对 象 常用 方 


法 如 表 6-21 所 示 。 
表 6-21 VideoContext 实例 对 象 的 常用 方法 
方 法 参数 类 型 功 能 
play() 无 播放 视频 
pause( ) 无 暂停 视频 播放 
stop() 无 停止 视频 播放 
seek(position) Number 跳 转 到 position 位 置 (单位 : s) 
发 送 弹 幕 。data={text,color}， 其 中 :text 一 一 弹 幕 文字 ，color 一 一 
sendDanmu(data) Object 弹 幕 颜色 
Baytaclietetiatd) i ite 支持 0.5/0.8/1.0/1.25/1.5， 从 2.6.3 版 本 起 支持 
, . 进入 全 屏 。object ={direction}， 其 中 direction 可 以 为 : 0 一 一 下 
requestFullScreen(object) | Object 常 坚 向 ， 屏幕 逆 时 针 90 度 ， 屏幕 顺 时 针 90 度 
exitFullScreen0) 无 退出 全 屏 
showStatusBar0) 局 显示 状态 栏 ， 仅 在 iOS 全 屏 下 有 效 
hideStatusBar() 无 隐藏 状态 栏 ， 仅 在 iOS 全 屏 下 有 效 


下 面 以 实现 图 6.12 所 示 的 视频 播放 器 小 程序 为 例 ， 介 绍 video 组 件 的 常见 属性 及 
VideoContext 实例 的 相关 方法 在 实际 开发 中 的 应 用 。 

当 用 户 单 击 图 6.12 所 示 界 面 的 “获取 视频 ”按钮 ， 可 以 调用 相册 视频 或 使 用 摄像 头 ， 单 
击 “ 发 送 弹 幕 ”按钮 ， 可 以 在 视频 播放 区 域 显示 输入 框 中 的 内 容 ， 其 效果 如 图 6.13 所 示 。 页 
面 结构 文件 代码 如 下 : 
1 <button bindtap="bindButtonTap"> 获 取 视 频 </button> 
<video class='videoclass' id="myVideo" src="{{src}}" danmu-list= 
"{{danmuList}}" enable-danmu danmu-btn controls></video> 


3 <input bindblur="bindInputBlur" placeholder=' 请 输入 弹 幕 内 容 ' /> 
4 xbutton bindtap="bindsendDanmu"> 发 送 弹 幕 </button> 


上 述 第 2 行 代 码 用 danmu-list 指定 视频 播放 时 默认 的 弹 幕 内 容 、 用 enable-danmu 开启 弹 
幕 效果 、 用 danmu-btn 显示 弹 幕 控 制 按钮 、 用 controls 显示 视频 播放 控制 按钮 。 
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eeeee WeChats 


精彩 绝伦 


图 6.12 视频 播放 器 (1) 图 6.13 视频 播放 器 (2) 
由 于 视频 组 件 控制 和 弹 幕 内 容 在 页 面 全 局 都 可 以 调用 ， 所 以 在 页 面 全 局 变量 定义 区 域 需 
要 定义 videoContext (VideoContext 实例 对 象 ) 和 inputValue 〈Input 中 输入 的 内 容 )。 
(1) 初始 化 数据 。 


下 data: { 

2 SFC: '', // 加 载 的 视频 地 址 
3 danmuList: [ // 弹 幕 对 象 

二 { 

5 text: "第 1s 出 现 的 弹 幕 '， // 内 容 

6 color: '#f£0000', // 颜 色 

7 time: 1 // 出 现时 间 

8 }， 

9 /** 其 他 弹 幕 */] 

UN 


(2) 页 面 加 载 监听 事件 。 


onLoad: function (options) { 
videoContext = wx.createVideoContext ('myVideo') 
} 


CD 请 


上 述 第 2 行 代 码 的 myVideo 与 页 面 结构 文件 中 定义 的 video 组 件 的 id 必须 一 样 。 
(3) 获取 视频 按钮 事件 。 


bindButtonTap: function () { 
var that = this 
Wx.chooseVideo({ 
sourceType: ['"album'， "camera'], 
maxDuration: 60, 
cameras [Efront, "backs]y 
success: function (res) { 
that .setDatal({ 
src: res.tempFilePath // 获 取 选 择 加 载 的 视频 地 址 
1) 


Fowawm 必 wm 


3 
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Eb } 
12 ]) 
13 “ke 


(4) 发 送 弹 幕 按钮 事件 。 


1 bindsendDanmu: function () { 
VideoContext.sendDanmu ({ 
3 text: inputValue， // 弹 幕 内 容 
4 color: 'grey' // 弹 幕 颜色 
}) 
6 3}, 

camera 


(1) camera 组 件 

camera 是 微 信 小 程序 开发 框架 提供 的 系统 相机 组 件 ， 需 要 用 户 授 权 
scope.camera 后 ， 小 程序 才 可 以 调用 系统 相机 功能 ， 可 以 使 用 wx. 
createCameraContext() 接 口 API 创建 camera 实例 。 该 组 件 在 页 面 结构 文件 中 
引用 时 ， 可 以 使 用 表 6-22 所 示 的 常用 属性 。 


表 6-22 camera 组 件 的 属性 及 功能 说 明 


属 性 类 型 功 能 
汪汪 sting 应 用 模式 ， 默认 值 为 normal (相机 模式 )， 也 可 以 为 scanCode( 扫 码 模 
式 )。 只 在 初始 化 时 有 效 ， 不 能 动态 变更 
device-position | String 摄像 头 朝向 ， 默 认 值 为 back( 后 置 )， 也 可 以 为 front (前 置 》 
flash String 闪光 灯 ， 默 认 值 为 auto〔 自 动 )， 也 可 以 为 on ( 开 ) 或 of ( 关 ) 
ee sting 指定 期 望 的 相机 帧 数 尺寸 默认 值 为 medium (中 尺寸 ), 也 可 以 为 small 
(小 尺寸 ) 或 large (大 尺寸 ) 
bindstop EventHandle | 摄像 头 在 非 正 常 终止 时 触发 ， 如 退出 后 台 等 情况 
binderror EventHandle | 用 户 不 允许 使 用 摄像 头 时 触发 
bindinitdone EventHandle | 相机 初始 化 完成 时 触发 
bindscancode ”| EventHandle | 在 扫 码 识别 成 功 时 触发 ， 仅 在 mode="scanCode" 时 生效 


例如 ， 在 页 面 显示 1 个 使 用 后 置 摄像 关 、 关 闭 闪 光 灯 及 高 度 为 300px 的 照相 机 ， 其 代码 
如 下 : 


1 <camera device-position="back" flash="off" binderror="error" style="width: 
100%; height: 300px;"></camera> 


(2) CameraContext。 
@ wx.createCameraContext( ): 创建 camera 上 下 文 CameraContext 对 象 。CameraContext 
实例 对 象 常用 方法 如 表 6-23 所 示 。 


表 6-23 ”CameraContext 实例 对 象 的 常用 方法 
方 法 功 能 
onCameraFrame(callback) “| Function 获取 Camera 实时 帧 数据 。callback 回调 函数 返回 值 如 表 6-24 所 示 
startRecord(object) 开始 录像 。 其 object 参数 及 功能 说 明 如 表 6-25 所 示 
stopRecord(object) Function 停止 录像 。 其 object 参数 及 功能 说 明 如 表 6-26 所 示 
takePhoto(object) | Function 拍摄 照片 。 其 object 参数 及 功能 说 明 如 表 6-27 所 示 
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表 6-24 onCameraFrame(callback) 回 调 函 数 返 回 值 


属 性 说 明 
width 
height 
data 图 像 像素 点 数据 ， 一 维 数组 ， 每 四 项 表示 一 个 像素 点 的 rgba 


属 性 功 能 
timeoutCallback | Function 超过 30s 或 页 面 onHide 时 会 结束 录像 
success | Function 接口 调用 成 功 的 回调 函数 
fail | Function 接口 调用 失败 的 回调 函数 


接口 调用 结束 的 回调 函数 


complete Function 


startRecord(object) 方 法 的 objecttimeoutCallback(res) 回 调 函数 返回 值 res.tempThumbPath 
表示 封面 图 片 文 件 的 临时 路 径 、res.tempVideoPath 表示 视频 文件 的 临时 路 径 。 


表 6-26 stopRecord(object)object 参数 及 功能 说 明 


stopRecord(object) 方 法 的 object.success(res) 回 调 函数 返回 值 res.tempThumbPath 表示 封面 


接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


Success 


complete 


图 片 文件 的 临时 路 径 、res.tempVideoPath 表示 视频 文件 的 临时 路 径 。 


表 6-27 takePhoto (object)object 参数 及 功能 说 明 


成 像 质 量 ， 默 认 值 为 normal (普通 质量 )， 也 可 以 为 : high 一 高 质 


quality 

量 ，low 一 一 低 质量 
Success | Function 接口 调用 成 功 的 回调 函数 
fail | Fanction 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


takePhoto (object) 方 法 的 object.success 人 res) 回 调 函数 返回 值 res. tempImagePath 表示 照片 
文件 的 临时 路 径 (android: jpg 格式 ，ios: png 格式 )。 

下 面 以 实现 图 6.14 所 示 的 视频 录 播 小 程序 为 例 介 绍 camera 组 件 的 常见 属性 及 
CameraContext 实例 的 相关 方法 在 实际 开发 中 的 应 用 。 

从 图 6.14 可 以 看 出 ， 页 面 最 上 部 左 侧 用 camera 组 件 打开 摄像 头 进行 拍照 或 录像 、 右 侧 
用 video 组 件 用 于 加 载 需要 播放 的 视频 ， 下 部 用 image 组 件 显示 照片 效果 。 页 面 设 计 效 果 如 
图 6.15 所 示 ， 页 面 结构 文件 代码 如 下 : 
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se000 WeChats 11:09 98% mm) 
视频 录 擅 器 “oe 加 
camera video 
button 
button 
image 
拍摄 照片 button 
图 6.14 视频 录 播 器 图 6.15 视频 录 播 器 设计 图 
1 <view style='display:flex;'> 
2 <camera device-position="back" flash="off" binderror="error" style= 
"margin-left: 50rpx;width: 300rpx; height: 300rpx;"> 
3 </camera> 
4 <video style='margin-left:50rpx; width: 300rpx; height:300rpx;' src= 


"{{videoPath}}"> </video> 

5 </view> 

6 <button bindtap="startVideo"> 开 始 录像 </button> 

7 <button bindtap="endVideo"> 结 束 录 像 </button> 

8 <image style='margin-left:50rpx;width:650rpx;height:500rpx;' src= 
"{{imgPath}}"> </image> 

9 <xbutton bindtap="takePic"> 拍 摄 照 片 <//button> 


由 于 照相 机 组 件 控制 在 页 面 全 局 都 可 以 调用 ， 所 以 在 页 面 全 局 变量 定义 区 域 需要 定义 


ctx (CameraContext 实例 对 象 )。 
@ 初始 化 数据 。 


| data: { 

入 imgPath: ''， // 照 片 路 径 
| VideoPath: '' // 视 频 路 径 
eh 


@ 页 面 加 载 事 件 。 


1 onLoad: function (options) { 
要 ctx = wx.createCameraContext () 
Sa 
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@ 开始 录像 按钮 事件 。 


startVideo: function () { 

ctx.startRecord({ 
success: function (res) { 
/** 开 始 录 像 成 功 需 处 理 功能 */ 
}, 
fail:function(res){ 
/** 开 始 录 像 失败 需 处 理 功能 */ 
} 

1) 

QO “a 


Feomowamwmmwnb 


@ 结束 录像 按钮 事件 。 


1 endVideo: function () { 

2 var that = this 

3 ctx.stopRecord({ 

4 success:function (res) { 

that .setData({ 

6 imgPath: res.tempThumbPath, // 封 面 图 片 临时 文件 路 径 
了 videoPath: res.tempVideoPath // 视 频 临时 文件 路 径 

8 }) 

9 

国 


0 }) 
Toe 


@ 拍摄 照片 按钮 事件 。 


1 takePic: function () { 

多 var that = this 

3 ctx.takePhotol({ 

4 quality: 'high', 

| success:function (res){ 

6 that .setData({ 

了 imgPath: res.tempImagePath // 照 片 临时 文件 存放 路 径 
8 

9 

3 


6.3.2” 音 视频 录制 器 的 实现 


音 视 频 录 制 器 是 影音 盒子 小 程序 的 一 个 子 功能 模块 , 主要 包含 个 人 中 心 页 面 ( 图 6.16)、 
你 的 心声 页 面 (图 6.17)、 你 的 足迹 页 面 (图 6.18) 和 记录 足迹 页 面 ( 图 6.19) 
等 4 个 页 面 。 其 中 个 人 中 心 页 面 以 tabBar 的 形式 展示 ， 个 人 中 心 页 面 一 方面 
用 于 呈现 音频 、 视 频 文件 标题 ， 单 击 标题 可 以 播放 音 视频 文件 ， 另 一 方面 单 
击 页 面 上 的 “更 多 ”， 可 以 打开 你 的 心声 页 面 或 你 的 足迹 页 面 。 


你 的 心声 页 面 可 以 录制 音频 文件 、 展 示 已 录制 的 音频 文件 标题 和 播放 已 


6.3.2.1 


录制 的 音频 文件 ， 你 的 足迹 页 面 可 以 展示 已 录制 的 视频 文件 标题 、 切 换 到 记录 足迹 页 面 ， 记 
录 足 迹 页 面 可 以 录制 视频 文件 、 播 放 已 录制 的 视频 文件 。 
在 6.2 节 创 建 的 项 目 中 新 建 你 的 心声 页 面 (voice)、 你 的 足迹 页 面 film) 和 记录 足迹 页 


[EL 


鲁 (video)。 
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e000e WeChats 


. 天 德 湖 公 | 
. 我 的 校园 
,天神 湖 公园 


图 6.16 个 人 中 心 页 面 


“eeee WecChats 

< 

摄像 ” 随 输 入 足迹 各 
1 . 天 德 湖 公园 

2 . 我 的 校园 
3 . 天 标 湖 公园 


图 6.18 你 的 足迹 页 面 


个 人 中 心 页 面 的 设计 与 实现 
(1) 个 人 中 心 界面 设计 。 


从 图 6.16 可 以 看 出 ， 整 个 页 面 分 成 上 下 两 个 部 分 ， 上 半 部 分 展示 已 经 录制 的 音频 文件 标 


weeee WeChats 11:41 


作 的 心声 


请 输入 心声 名 


图 6.17 你 的 心声 页 面 


eee0e WecChals 


《 


> 


00:00 


6.19 ”记录 足迹 页 面 
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题 、 心 声 和 更 多 等 信息 ， 单 击 “ 更 多 ”可 以 打开 你 的 心声 页 面 (voice); 下 半 部 分 展示 已 经 
录制 的 视频 文件 标题 、 足 迹 和 更 多 等 信息 ， 单 击 “ 更 多 ”可 以 打开 你 的 足迹 页 面 (filmy)。 
页 面 结构 文件 代码 。 


1 <1!-- 心 声 展示 区 域 --> 

2 <view class='audio'> 

<view class='title'> 

4 <view > 心声 </view> 

5 <view bindtap='toVoice'> 更 多 </view> 

6 </view> 

<scroll-view scroll-y style='height:90%'> 
8 <view wx:for="'{{audios}}'> 

9 <View class='item'>{{index+1}}. {{item.voiceName}}</view> 
10 </view> 

Eh </scroll-view> 

12 </view> 

13 <!-- 足 迹 展示 区 域 --> 

14 <view class='audio'> 

ey <view class='title'> 

16 <view> 足 迹 </view> 

1 <view bindtap='toFilm'> 更 多 </view> 

18 </view> 

19 <scroll-view scroll-y style='height:90%'> 


20 <view wx:for='{{videos}}'> 

溉 和 <View class='item'>{{index+1}}. {{item.videoName}}</view> 
22 </view> 

2 </scroll-view> 

24 </view> 


上 述 代 码 第 8~10 行 用 列表 演 染 语句 将 本 地 缓存 中 的 音频 信息 数组 audios 中 的 每 个 “ 心 
声 ” 元 素 的 标题 (voiceName) 显示 出 来 ， 即 在 页 面 上 显示 音频 文件 的 标题 。 第 20~22 行 用 
列表 演 染 语句 将 本 地 缓存 中 的 视频 信息 数组 videos 中 的 每 个 “足迹 ”元 素 的 标题 (videoName) 
显示 出 来 ， 即 在 页 面 上 显示 视频 文件 的 标题 。 

@ 页 面 样式 文件 代码 。 


page 1{ 
height: 100%; 
} 
.audio { 
padding-left: 10rpx; 
padding-right: 1l10rpx; 
height: 50%; 
} 
attLe Ff 
10 display: flex; 
11 flex-direction: row; 
2 justify-content: space-between; 
3 background: gainsboro; 
14 color: rqgb(81, 205, .50) 
15 height: 10%; 
= 1 
17 .item { 
18 padding-top: 15rpx; 
19 padding-bottom: 15rpx; 
20 border-bottom: 2rpx dotted grey; 
Zo 
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(2) 个 人 中 心 页 面 功能 实现 。 

个 人 中 心 页 面 加 载 时 ， 从 本 地 缓存 中 取出 存放 音频 信息 的 audios 数组 和 存放 视频 信息 的 
videos 数组 ， 并 将 相应 数据 更 新 到 个 人 中 心 页 面 。 用 户 可 以 单 击 “ 心 声 ” 右 侧 的 “更 多 ” 跳 
转 到 你 的 心声 页 面 〈voice.wxml)， 也 可 以 单 击 “ 足 迹 ” 右 侧 的 “更 多 ” 跳 转 到 你 的 足迹 页 面 
(film.wxm!l)。 

Q 初始 化 数据 。 


至 data: { 

逐 audios:[ ]， // 存 放 音 频 文 件 信息 (心声 ) 
3 videos:[ ] // 存 放 视频 文件 信息 (足迹 ) 
轩 }, 


audios 数组 的 每 个 元 素 由 voiceName 音频 文件 标题 )、voiceUrl (音频 文件 存放 地 址 》 
两 个 属性 组 成 ; videos 数组 的 每 个 元 素 由 videoName (音频 文件 标题 )、videoPath (音频 文件 
存放 地 址 ) 两 个 属性 组 成 。 
@ 页 面 加 载 事件 。 
1 onLoad: function (options) { 
2 var that = this 
3 // 从 本 地 缓存 读 出 心声 信息 
4 wx.getstorage ({ 
S key: "'audios', 
6 success(res) { 
2 that .setData({ 
8 audios: res.data 
9 }) 
10 } 
2 }) 
I // 从 本 地 缓存 取出 足迹 信息 
13 wx.getstorage({ 


14 key: 'videos', 

15 success: function (res) { 
16 that .setData({ 

17 videos: res.data 

18 }) 

19 }, 

20 }) 

2 


@ 跳 转 到 你 的 心声 页 面 事件 。 
当 单 击 “ 心 声 ” 右 侧 “ 更 多 ”时 , 页面 跳 转 到 你 的 心声 页 面 (voice.wxml)， 其 代码 如 下 : 


1 toVoice:function(e){ 

和 wx.navigateTo ({ 

<] url: '/pages/voice/voice', 
4 }) 

5 J}, 


外 跳 转 到 你 的 足迹 页 面 事件 。 
当 单 击 “ 足 迹 ” 右 侧 “ 更 多 ”时 ,页面 跳 转 到 你 的 足迹 页 面 (film-wxml)， 其 代码 如 下 : 


1 toFilm: function (e) { 

2 wx.navigateTo({ 

3 url: '/pages/film/film', 
和 1) 
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5 1}, 


园 你 的 心声 页 面 的 设计 与 实现 

(1) 你 的 心声 界面 设计 。 

加 载 心声 页 面 时 ， 图 6.17 上 部 只 显示 “录音 ”， 而 输入 竺 录制 音频 文件 
标题 的 input 组 件 和 显示 “开始 录制 ”信息 的 view 组 件 , 只 有 在 单 击 “ 录 音 ” 
后 才 会 显示 。 界 面 设计 时 用 input 组 件 和 view 组 件 的 display 属性 绑 定 isShow 
变量 来 实现 。 该 页 面 的 下 半 部 分 用 列表 泻 染 将 存储 在 本 地 缓存 中 音频 文件 的 
标题 展现 出 来 ， 并 绑 定 单 击 事件 playVoice， 用 于 播放 音频 。 

@ 页 面 结构 文件 代码 。 


<view class='recorder'> 
<view bindtap='addVoice'> 录 音 </view> 
<input bindinput="bindKeyInput" style='border:0.5px solid; width:50%; 
isplay:{{isshow}}' placeholder=' 请 输入 心声 名 ' value= '{{value}}'></input> 
<view style="display:{{isShow}}" bindtap="'startRec'>{{recName} }</view> 
</view> 
<view class="'audio'> 
<scroll-view scroll-y style='height:90%'> 
<View wx:for='{{audios}}' > 
<view id='{{index}}' bindtap='playVoice' class='item'> {{index+1}). 
{{item.voiceName}}</view> 
10 </view> 
11 </scroll-view> 
12 </view> 


mo~wamwmcmDwn 


@ 页 面 样式 文件 代码 。 


page { 
width: 100%; 
height: 100%; 
k 
.recorder { 
padding-left: 10rpx; 
padding-right: 10rpx; 
display: flex; 
flex-direction: row; 
10 justify-content: space-between; 
11 align-items: center; 
12 background: gainsboro; 
13 Color: rgb(i8; 1L79 39) 7 
14 height: 10%; 
yn 
16 .audio { 
3 padding-left: 10rpx; 
18 padding-right: 10rpx; 
是 
20 .item { 
人 padding-top: 15rpx; 
22 padding-bottom: 15rpx; 
23 border-bottom: 2rpx dotted grey; 
24 } 
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(2) 你 的 心声 页 面 功能 实现 。 
当 加 载 你 的 心声 页 面 时 ， 从 本 地 缓存 中 取出 存放 音频 信息 的 audios 数组 ， 并 将 相应 数据 
更 新 到 本 页 面 。 用 户 单 击 图 6.17 左上 方 的 “录音 ”后 ,“ 请 输入 心声 名 ”的 输入 框 和 “开始 
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录制 ”信息 显示 出 来 。 在 输入 框 中 输入 待 录 制 声音 的 标题 后 ， 单 击 “ 开 始 录制 ” 此 时 可 以 录 
制 音频 信息 ， 并 且 “ 开 始 录制 ”切换 为 “停止 录制 ” 单 击 “ 停 止 录 制 ” 后 ， 音 频 录制 结束 ， 
并 将 当前 录制 的 音频 文件 信息 〈 标 题 、 存 放 地 址 ) 保存 到 本 地 缓存 的 audios 中 。 由 于 需要 在 
该 页 面 全 局 使 用 录音 管理 器 、 音 频 播放 InnerAudioContext 实例 对 象 和 判断 当前 的 录音 状态 ， 
所 以 需要 定义 recorderManager、innerAudioContext 和 isRecord 为 页 面 全 局 变量 ， 代 码 如 下 : 


1 var isRecord = true 
2 Var recorderManager = wx.getRecorderManager() 
3 var innerAudioContext = wx.createInnerAudioContext () 


Q@ 初始 化 数据 。 


笠 data: { 
2 isShow: 'none'， // 控 制 input、view 组 件 是 否 显示 ， 默 认 不 显示 
3 VoiceName: ! // 待 录制 的 音频 标题 
4 audios: []， // 音 频 信息 数组 
5 recName: ' // 开 始 录制 或 停止 录制 
6 value: '!' // 输 入 框 中 的 内 容 
We 
@ 页 面 加 载 事 件 。 
1 onLoad: function (options) { 
/*#* 与 个 人 中 心 页 面 加 载 事 件 中 从 本 地 缓存 中 读 出 心声 信息 代码 一 样 ， 此 处 略 */ 
3 this.setData({ 
4 recName: ' 开 始 录制 ' // 页 面 加 载 默认 显示 “开始 录制 
5 }) 
(A 


人 @ 单 击 录音 事件 。 

加 载 你 的 心声 页 面 (voice.wxml) 时 ， 输 入 心声 名 称 的 input 组 件 和 显示 “开始 录制 ”的 
view 组 件 并 不 显示 在 页 面 上 ， 只 有 单 击 页 面 左上 方 的 “录音 ”后 才 显示 在 页 面 上 。 本 案例 实 
现时 用 isShow 变量 的 值 进行 控制 ， 其 代码 如 下 : 

1 addVoice: function (e) { 
沁 this.setDatal({ 

3 isShow: "block' 

4 }) 

SR 


外 自 定义 开始 录音 方法 。 

为 了 在 页 面 上 单 击 “ 开 始 录制 ”后 能 够 录制 音频 信息 ， 本 案例 自 定义 了 recordBegin( ) 方 
法 ， 方 法 中 定义 了 待 录制 音频 的 时 长 、 采 样 率 、 录 音 通 道 数 、 编 码 码 率 及 音频 格式 等 音频 属 
性 ， 其 代码 如 下 : 


1 recordBegin: function (e) { 

人 const options = { 

3 duration: 10000, // 录 音 的 时 长 
4 sampleRate: 16000, // 采 样 率 

与 numberofChannels: 1, // 录 音 通道 数 
6 encodeBitRate: 96000, // 编 码 码 率 
format: 'mp3°', // 音 频 格 式 

8 frameSize: 50, // 帧 大 小 


息 切 换 为 “停止 录制 ”， 单 


1 
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recorderManager.start (options); // 开 始 录音 
recorderManager.onstart(() => { 


1) 


/** 监 听 录 制 开始 事件 */ 


recorderManager.onError((res) => { 


/x+ 监听 录制 出 错 事件 */ 


@@ 自 定义 停止 录音 方法 。 
为 了 在 页 面 上 单 击 “ 停 止 录制 ”后 能 够 对 录制 音频 信息 进行 相应 的 处 理 ， 本 案例 自 定义 
了 recordStop ( ) 方 法 ， 其 代码 如 下 : 


recordstop: function (e) 
var that = this 


{ 


recorderManager .stop () 7 // 停 止 录制 音频 
recorderManager.onstop((res) => { 
Var voiceUr1l = res.tempFilePath; // 取 出 录制 音频 的 临时 路 径 
Var tempVoice = { // 封 装 音频 信息 
voiceName: that.data.voiceName, // 标 题 
VoiceUrl: voiceUrl // 地 址 
} 
that .data.audios.push (tempVoice) // 加 入 audios 数组 
that. setData({ 
audios: that.data.audios 
}) 
wx.setstorage ({ // 写 入 本 地 缓存 


]) 


]， 


key: "audios", 


data: that.data.audios 


}) 


开始 录制 /停止 录制 事件 。 


单 直 


全 “开始 录制 ”后 ， 调 用 自 定义 开始 录音 方法 recordBegin( )， 并 且 将 “开始 录制 ” 信 


#8 “停止 录制 ”后 ， 调 用 自 定义 停止 录音 方法 recordStop( )， 并 将 


“停止 录制 ”信息 切换 为 “开始 录制 ”。 其 代码 如 下 : 


startRec: function (e) { 
if (this.data.voiceName == '') { 


wx.showToast ({ 


title: ' 心 声名 不 能 为 空 '， 


icon: 'none' 


}) 
return 


} 
if (isRecord) { 


this .setData({ 
recName: ' 停 止 录制 ' 


}) 
isRecord = false 


this.recordBegin () 


} else { 


this .setData({ 
recName : “开始 录制 


Value 


// 调 用 开始 录音 方法 
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19 }) 

20 isRecord = true 

2 this.recordStop () // 调 用 停止 录音 方法 
2 上 

23 ]} 


上 述 第 2-8 行 代码 表示 在 开始 录制 声音 前 ,必须 在 input 组 件 中 输入 待 录制 音频 的 标题 。 
input 组 件 bindinput 属性 绑 定 的 bindKeyInput 事件 代码 如 下 : 
1 bindKeyInput: function (e) { 
2 this.setData({ 
< VoiceName: e.detail.value 
4 
3 


}) 
}, 


@ 播放 音频 文件 事件 。 
单 击 页 面 上 的 心声 标题 后 ， 可 以 自动 播放 音频 信息 ， 其 代码 如 下 : 


1 playVoice: function (e) { 

2 var index = e.currentTarget .id // 对 应 音频 文件 的 数组 元 素 下 标 
3 innerAudioContext.autoplay = true  ”// 自 动 播放 

4 innerAudioContext.src = this.data.audios[index] .voiceUrl, 
上 innerAudioContext.onPlay(() => { 

6 /x+ 监听 音频 播放 事件 */ 

2 }) 

8 innerAudioContext.onError((res) => { 

9 /xx 监听 音频 播放 出 错 事 件 */ 

10 }) 

11 I 


图 你 的 足迹 页 面 的 设计 与 实现 

你 的 足迹 界面 设计 和 你 的 心声 页 面 界面 设计 效果 几乎 完全 一 样 ， 不 再 歼 
述 ， 读 者 可 以 参阅 代码 包 lesson6_music 文件 夹 中 的 内 容 。 而 功能 实现 模块 与 
De 后 计 请 eeuel 本 
样 的 ， 在 你 的 足迹 页 面 单 击 “足迹 标题 ”后 ， 会 传递 当前 单 击 的 足迹 标题 对 
Eee 2 
面 区 域 加 载 对 应 的 视频 文件 ; 单 击 “ 更 多 ”后 , 会 传递 当前 输入 的 足迹 标题 到 记录 足迹 页 面 ， 
在 该 页 面 的 上 半 部 分 页 面 区 域 可 以 录制 视频 ,并 在 下 半 部 分 页 面 区 域 预览 和 保存 录制 的 视频 。 


Q 开始 录像 事件 。 
1 startRec:function(e){ 
if (this.data.videoName == '') { 
3 wx.showToast ({ 
4 title: ' 足 迹 名 不 能 为 空 '， 
5 icon: "none'" 
6 }) 
ye return 
8 } 
9 wx.navigateTo({ 
10 url: '/pages/video/video?videoName="' + this.data.videoName, 
11 }) 
12 jy 


上 述 第 10 行 代 码 表 示 将 在 本 页 面 上 方 输入 的 足迹 标题 以 videoName 为 参数 传递 给 记录 


授 第 6 章 多 媒体 应 用 开发 


足迹 页 面 (video.wxml)。 


址 以 videoPath 为 参数 传递 给 记录 足迹 页 面 (video.wxml)。 


功 色 


oAONDP 


@ 单 击 足迹 标题 事件 。 


playVideo:function(e){ 
Var id =parseInt (e.currentTarget .id) 
Var videoPath = this.data.videos [id] .videoPath 
wx.navigateTo ({ 
url: '/pages/video/video?videoPath=' + videoPath, 
1) 
jr 


上 述 第 5 行 代码 表示 将 在 本 页 面 下 方 单 击 的 足迹 标题 对 应 的 视频 存放 地 
记录 足迹 页 面 的 设计 与 实现 


(1) 记录 足迹 界面 设计 。 
记录 足迹 页 面 的 上 半 部 分 区 域 用 于 预览 摄像 头 实 时 效果 ， 以 便 实 现 录像 


外 ， 下 半 部 分 区 域 用 于 加 载 待 播放 的 视频 文件 和 保存 视频 到 本 地 缓存 。 


Q@ 页 面 结构 文件 代码 。 


<view class='cententView'> 

<camera class='videoclass' device-position="back" flash="off" /> 
</view> 
<button type="primary" bindtap="videostart">{{recName}}</button> 
<view class='cententView'> 

<video class='videoclass' src="{{videoPath}}"></video> 
</view> 


<button type="primary" bindtap="videoSave"> 保 存 足 迹 </button> 


上 述 第 3 行 代 码 定义 了 一 个 使 用 后 置 摄像 头 、 关 闭 闪光 灯 的 照相 机 ; 第 4 行 代码 绑 定 


recName 变量 控制 button 组 件 上 显示 “开始 录像 ”或 “停止 录像 ” 第 6 行 代 码 绑 定 videoPath 
变量 在 video 组 件 上 加 载 视频 文件 。 


@ 页 面 样式 文件 代码 。 


.cententViewt{ 
display: flex 

3 

button{ 
margin-left: 50rpx; 

margin-right: 50rpx; 

font-size: 30rpx; 

有 

.videoclass{ 
margin-left: 50rpx; 
width: 650rpx; 
height: 500rpx; 
background-color: lavender; 


(2) 记录 足迹 页 面 功能 实现 。 
当 加 载 记录 足迹 页 面 (video.wxml) 时 ， 获 取 你 的 足迹 页 面 〈fm.wxml) 传递 的 待 录制 


视频 文件 的 标题 和 待 播放 视频 的 文件 路 径 ， 取 出 本 地 缓存 中 存放 的 视频 文件 数组 videos〈 保 
存 的 足迹 文件 信息 )， 以 便 将 新 录制 的 足迹 视频 文件 追加 到 videos 数组 ， 并 保存 到 本 地 缓存 


中 。 


于 需要 在 该 页 面 全 局 使 用 CameraContext 实例 对 象 和 视频 文件 标题 ， 所 以 需要 定义 ctx 
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中 | 微 信 小 程序 案例 开发 “区 


和 videoName 为 页 面 全 局 变量 ， 代 码 如 下 : 


1 Mar ctx 
2 var videoName 


@ 初始 化 数据 。 
datas 
2 recName: ' 开 始 录像 '"， ”// 开 始 录像 (停止 录像 ) 
3 videoPath: '', // 视 频 文件 地 址 
4 isRec: true, // 录 像 状 态 
5 videos:[] // 足 迹 视 频 文件 信息 
6 }, 


@ 页 面 加 载 事 件 。 


1 onLoad: function (options) { 

2 this.setData({ 

3 VideoPath:options.videoPath // 取 出 和 lm 页 面 传递 的 视频 文件 地 址 
让 }) 

本 var that = this 

6 ctx = wx.createCameraContext (this) // 创 建 CameraContext 对 象 

了 videoName = options.videoName // 取 出 film 页 面 传递 的 视频 文件 标题 
8 wx.getstorage ({ 

9 key: 'videos', 

10 success: function(res) { 

2 that.setDatal({ 

a Videos:res.data 

13 }) 

了 }, 

15 }) 

GAS 


上 述 第 2~4 行 代码 表示 取出 你 的 足迹 页 面 (film.wxml) 传递 的 待 播放 视频 文件 地 址 ， 并 
更 新 记录 足迹 页 面 video 组 件 加 载 的 视频 内 容 ; 第 8~15 行 代码 表示 取出 本 地 缓存 存放 的 视频 
文件 信息 。 

@ 开始 录像 /停止 录像 事件 。 

单 击 “ 开 始 录像 ”按钮 ， 调 用 startRecord( ) 方 法 开始 录像 ， 并 在 开始 录像 的 success( ) 回 
调 函 数 中 更 新 recName 变量 值 和 isRec 变量 值 ， 即 将 按钮 上 的 内 容 切 换 为 “停止 录像 ”。 单 击 
“停止 录像 ”按钮 ， 调 用 stopRecord( ) 方 法 停止 录像 ， 并 将 当前 录制 的 视频 文件 路 径 更 新 给 
videoPath 变量 ， 同 时 该 视频 文件 会 自动 加 载 到 页 面 的 video 组 件 中 。 其 详细 代码 如 下 : 


1 videostart: function () { 

多 var that = this 

3 if (this.data.isRec) { 

4 ctx.startRecord({ 

5 success: function (res) { 
6 that .setData({ 

| recName: ' 停 止 录像 '， 

8 


isRec: false 


9 }) 

10 } 

二 由 }) 

bp } else { 

1 ctx.stopRecord({ 


14 success: function (res) { 


后 第 6 章 多 媒体 应 用 开发 攻守 


号 that .setData({ 


16 recName : ' 开 始 录像 '， 
37 isRec: true, 
18 VideoPath: res.tempVideoPath 
3 }) 
20 } 
2 }) 
22 } 
SR 
@ 保存 足迹 事件 。 


当 用 户 单 击 “ 停 止 录像 ”按钮 后 ， 刚 录制 的 视频 文件 自动 加 载 到 video 组 件 上 ， 此 时 用 
户 可 以 在 video 组 件 上 播放 视频 , 如 果 刚 录制 的 视频 文件 满足 要 求 , 则 可 以 单 击 “ 保 存 足 迹 ” 
按钮 ， 将 刚 录 制 的 视频 文件 组 装 成 {fvideoName，videoPath} 格 式 ， 保 存在 本 地 缓存 的 videos 
数组 中 。 其 详细 代码 如 下 : 


1 videoSave:function(){ 

2 console.1og (videoName, this.data.videoPath) 

3 Var tvideo={ 

4 VideoName: videoName, 

5 videoPath:this.data.videoPath 

6 } 

nh this.data.videos.push (tvideo) 

8 wx.setstorage ({ 

9 key: 'videos', 

10 data: this.data.videos, 

ll }) 

4 

SA 

至 此 ， 影 音 盒子 的 音 视频 录制 器 功能 设计 完成 。 由 于 本 项 目 案例 录制 的 音频 、 视 频 文件 

仅 保 存在 本 地 缓存 中 ， 当 用 户 更 换 移动 终端 设备 时 ， 就 会 显示 其 应 用 的 缺陷 。 读 者 学 习 完 第 


8 章 内 容 后 ,可 以 对 


本 项 目 案例 的 功能 进行 扩展 , 将 录制 的 音频 、 视 频 文 件 上 传 到 服务 器 端 ， 


增强 小 程序 应 用 的 灵活 性 。 
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本 章 结合 实际 案例 项 目的 开发 过 程 介绍 了 普通 音频 API、 背 景 音 频 API、 动 画 API 和 录 
音 管理 器 的 使 用 方法 。 通 过 本 章 的 学 习 可 以 让 读者 掌握 小 程序 中 多 媒体 应 用 开发 的 流程 和 相 


硬件 设备 应 用 开发 


近年 来 ， 基 于 传感器 数据 的 服务 发 展 十 分 迅速 ， 涉 及 商务 、 医 疗 、 工 作 和 生活 的 各 个 方 
面 ， 为 用 户 提供 方向 指向 、 闹 铃 提示 等 一 系列 服务 。 现 在 ， 几 乎 所 有 的 移动 设备 都 配置 不 同 
类 型 的 传感器 ， 开 发 者 可 以 利用 不 同类 型 的 传感器 进行 趣味 性 的 功能 开发 。 

。 掌握 系统 信息 获取 API 的 用 法 ; 

。 掌握 罗盘 API、 加 速度 计 API 的 用 法 和 应 用 场景 ; 


。 掌握 设备 方向 API、 扫 码 API 和 振动 API 的 用 法 和 应 用 场景 ; 
。 掌握 手机 状态 监测 API 的 使 用 方法 和 应 用 场景 。 


SE 


微 信 小 程序 开发 框架 提供 了 Wi-Fi、 蓝 牙 、 电 量 、 网 络 、 截 屏 、 扫 码 等 接口 国 维 祝 此 加 


API 和 陀螺 仪 、 设 备 方向 、 加 速 计 等 传感器 接口 API， 用 来 监测 移动 设备 的 状 
态 、 跟 踪 用 户 的 行为 和 获取 传感器 的 相关 数据 ， 以 便 开 发 者 开发 出 适合 在 移动 站 
设备 上 运行 的 各 类 应 用 软件 。 

7.1.1 监测 设备 状态 API 


监测 设备 状态 API 包括 获取 系统 信息 、 网 络 连接 状态 、Wi-Fi 连接 状态 、 蓝 牙 连接 状态 
和 电量 等 ， 具 体 API 及 详细 功能 说 明 如 表 7-1 所 示 。 


| 


表 7-1 监测 设备 状态 API 及 功能 


类 别 API 功 能 

系统 信息 wx.getSystemInfoSync( ) 获取 系统 信息 
wx.getSystemInfo( ) 同步 获取 系统 信息 

网 络 wx.gefNetworkType( ) 获取 网 络 类 型 
wx.onNetworkStatusChange( ) ”| 监听 网 络 状态 变化 事件 
wx.getWifiList( ) 请 求 获取 Wi-Fi 列表 
wx.onGetWifiList( ) 监听 获取 到 Wi-Fi 列表 数据 事件 

Wi-Fi Wx.getConnectedWifi( ) 获取 已 连接 中 的 Wi-Fi 信息 
wx.start Wifi( ) 初始 化 Wi-Fi 模块 


wx.stopWifi( ) 关闭 Wi-Fi 模块 
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续 表 


功 


eb 
用 


| wx.getBluetoothDevices( ) 获取 在 蓝牙 模块 生效 期 间 所 有 已 发 现 的 蓝牙 设备 
蓝牙 | wx.getBluetoothAdapterState( ) | 获取 本 机 蓝牙 适配器 状态 
| wx.openBluetoothAdapter( ) 初始 化 蓝牙 模块 
| wx.closeBluetoothAdapter( ) 关闭 蓝牙 模块 
电量 | wx.getBatteryInfo( ) 获取 设备 电量 
wx.getBatteryInfoSync( ) 同步 获取 设备 电量 


7.1.2 跟踪 用 户 行为 API 


跟踪 用 户 行为 API 包括 剪贴 板 、 扫 码 和 屏幕 等 ， 具 体 API 及 详细 功能 说 明 如 表 7-2 
所 示 。 


表 7-2 跟踪 用 户 行为 API 及 功能 


类 和 别 API 功 能 

前 贴 板 wx.getClipboardData( ) 获取 系统 剪贴 板 的 内 容 
wx.setClipboardData( ) 设置 系统 前 贴 板 的 内 容 

扫 码 wx.scanCode( ) 调 起 客户 端 扫 码 界面 进行 扫 码 
wx.setScreenBrightness( ) 设置 屏幕 亮度 

屏幕 wx.getScreenBrightness( ) 获取 屏幕 亮度 
wx.setKeepScreenOn( ) 设置 是 否 保持 常 沈 状态 
wx.onUserCaptureScreen( ) 监听 用 户主 动 截屏 事件 


7.1.3 ”获取 传感器 数据 API 


获取 传感器 数据 API 包括 加 速 计 、 罗 盘 、 设 备 方向 和 陀螺 仪 等 ， 具 体 API 及 详细 功能 说 
明 如 表 7-3 所 示 。 


表 7-3 跟踪 用 户 行为 API 及 功能 


类 别 功 能 
wx.startAccelerometer( ) 开始 监听 加 速度 数据 
ne 0 
wx.onAccelerometerChange( ) 监听 加 速度 数据 变化 事件 
wx.startCompass( ) 开始 监听 罗盘 数据 
罗盘 wx.stopCompass ( ) 停止 监听 罗盘 数据 
wx.onCompassChange( ) 监听 罗盘 数据 变化 事件 


wax.startDeviceMotionListening( ) 开始 监听 设备 方向 的 变化 
设备 方向 wx.stopDeviceMotionListening( ) 停止 监听 设备 方向 的 变化 


wx.onDeviceMotionChange( ) 监听 设备 方向 变化 事件 
Wx.startGyroscope ( ) 开始 监听 陀螺 仪 数据 
陀螺 仪 wxX.stopGyroscope () 停止 监听 陀螺 仪 数据 


Wx.onGyroscopeChange( ) 监听 陀螺 仪 数 据 变 化 事件 
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本 中 微 信 小 程序 案例 开发 “ 礁 x 


OO 7.2 指南 针 的 设计 与 实现 


为 了 应 对 现代 城市 复杂 的 交通 状况 ， 实 现 野 外 定向 穿越 的 目标 ， 指 南 针 是 一 个 不 可 或 缺 
的 工具 。 本 节 将 以 简易 指南 针 的 实现 为 例 ， 详 细 介 绍 基于 微 信 平台 的 加 速 计 、 罗 盘 、 陀 螺 仪 
等 传感器 在 小 程序 中 的 应 用 开发 方法 。 | 


7.2.1 预备 知识 


系统 信息 
@ wx.getSystemInfo(Object objecb: 获取 系统 信息 。object 参数 及 功能 说 “211 
明 如 表 7-4 所 示 。 


表 7-4 object 参数 及 功能 说 明 
属性 | 类 型 | 功 能 
success 接口 调用 成 功 的 回调 函数 。success(res) 回 调 函 数 的 参数 返回 值 如 表 7-5 所 示 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


表 7-5 success (res) 回调 参数 返回 值 及 功能 说 明 


[和 | 属性 | 类 型 | 动 衣 
[入 [SDRversion swing | 放下 左上 
) 


属 性 类 型 
brand String 


model String 


允许 微 信使 用 摄像 头 
本 本 放生 可 的 


screenWidth Number 


screenHeight Number 


屏幕 宽度 (单位: px) Boolean a 使 用 麦克 风 


2 备 型 号 
状态 栏 高 度 (单位 : 
xX 


version String bluetoothEnabled Boolean | 蓝牙 的 系统 开关 


statusBarHeight | String 6 notificationAuthorized | Boolean | 允许 微 信和 通知 的 开关 
system String ”| 操作 系统 及 版 本 locationEnabled Boolean | 地理 位 置 的 系统 开关 
platform String ”| 客户 端 平台 wifiEnabled Boolean | Wi-Fi 的 系统 开关 


@ wx.getSystemInfoSync( ): 获取 系统 信息 ， 是 wx.getSystemInfo( ) 的 同步 版 本 。 它 有 
Object 类 型 的 返回 值 ， 其 返回 值 的 属性 值 与 表 7-4 内 容 相 同 。 常 见 使 用 代码 格式 如 下 : 


1 wx.getSsystemInfo({ 

success (res) { 

= console.1og (res.model) // 输 出 设备 型 号 
4 console.1log (res.version) // 输 出 微 信 版 本 号 
5 console.1og (res.platform) // 输 出 客户 端 平台 
6 } 

| }) 

8 地 

3 const res = wx.getSystemInfoSync() 

到 console.1log (res.model) // 输 出 设备 型 号 
ll console.1log (res.version) // 输 出 微 信 版 本 号 


授 D 第 7 章 硬件 设备 应 用 开发 已 时 


之 console.1og (res.platform) // 输 出 客户 端 平台 
13. Fcatch (el { 


14 // 异常 处 理 代码 
lo 


上 述 第 1~7 行 代码 与 第 9~12 行 代码 分 别 使 用 了 不 同 的 获取 系统 信息 的 方法 ， 功 能 完全 
一 样 。 

电池 电量 

@ wx.getBatteryInfo(Object object): 获取 设备 电量 。object 参数 及 功能 说 明 如 表 7-6 
所 示 。 


表 7-6 object 参数 及 功能 说 明 


功 能 
接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


属 性 
SUccess | Function 
fail 


complete 


| Function 


Function 


success(res) 回 调 函 数 的 res.level 返回 设备 电量 值 ( 范 围 为 1~100); res.isCharging 返回 
boolean 类 型 数据 ， 表 示 是 否 正 在 充电 中 。 

@ wx.getBatteryInfoSync( ): 获取 设备 电量 , 是 wx.getBatteryInfo( ) 的 同步 版 本 , 但 在 iOS 
上 不 可 用 。 它 有 Object 类 型 的 返回 值 ， 其 返回 值 的 属性 值 level 和 isCharging 与 
wx.getBatteryInfo( ) 相 同 。 常 见 使 用 代码 格式 如 下 : 


console.1og (flag ? “正在 充电 ' : ' 没 有 充电 ') 
} 
于 


1 var flag=false 

入 WwWX.getBatteryInfo({ 

success: function (res) { 

4 flag = res.isCharging // 获 取 冲 电 状态 
5 console.log(res.level.toFixed(2)) // 输 出 当前 电量 值 
6 

7 

8 


设备 方向 
@ wx.startDeviceMotionListening(Object object): 开始 监听 设备 方向 的 变化 小 
object 参数 及 功能 说 明 如 表 7-7 所 示 。 


表 7-7 object 参数 及 功能 说 明 
属 性 | 类 功 能 
监听 设备 方向 的 变化 回调 函数 的 执行 频率 , 默认 值 为 normal (普通 回调 频率 ， 
约 200 次 8)。 也 可 以 为 game (更 新 游戏 的 回调 频率 ， 约 20 次 / ms)、i (更 
新 UI 的 回调 频率 ， 约 60 次 /ms) 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


interval 


@) wx.stopDeviceMotionListening(Object object): 停止 监听 设备 方向 的 变化 。object 参数 
及 功能 说 明 如 表 7-8 所 示 。 
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表 7-8 object 参数 及 功能 说 明 

属 性 | 类 型 
success Function 
fail Function 
complete Function 


接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


@ wx.onDeviceMotionChange(function callback): 监听 设备 方向 变化 事件 。 设 备 方向 变化 
事件 的 回调 函数 callback 的 返回 值 res 包含 的 属性 如 表 7-9 所 示 。 


表 7-9 callback 回调 函数 返回 属性 值 及 功能 说 明 


属性 类 型 功 能 
二 i 当 设备 坐标 X/Y 和 地 球 X/Y 重合 时 ， 绕 着 Z 轴 转 动 的 夹 角 为 lpha， 范 围 为 
[0, 2*PI)。 逆 时 针 转 动 为 正 
和 本 当 设 备 坐 标 Y/Z 和 地 球 YZ 重合 时 ， 绕 着 和 轴 转 动 的 夹 角 为 beta。 范 围 为 
[1*PL PI)。 项 部 朝 着 地 球 表面 转动 为 正 。 也 有 可 能 朝 着 用 户 为 正 
当 设 备 KZ 和 地 球 X/Z 重合 时 ， 绕 着 Y 轴 转 动 的 夹 角 为 gamma。 范 围 为 
gamma Number 


[1*PV2, PL2)。 右 边 朝 着 地 球 表面 转动 为 正 


监听 设备 方向 变化 事件 的 频率 由 wx.startDeviceMotionListening( ) 方 法 的 interval 参数 值 
决定 。 在 实际 开发 中 ， 如 果 要 判断 设备 的 方向 ， 可 以 先 调用 wx.startDeviceMotionListening( ) 
方法 开始 监听 , 然后 调用 wx.onDeviceMotionChange( ) 方 法 监听 设备 方向 的 变化 , 并 根据 变化 
时 返回 的 alpha 角度 值 判断 设备 的 方向 ， 其 代码 如 下 : 


本 WwWX.startDeviceMotionListening({}) // 开 始 监听 设备 方向 
2 wx.onDeviceMotionChange (function (res) { 

3 var alpha = parseFloat (res.alpha) .toFixed (2); 
4 var pDirection = ' 正 面 ' 

本 if (alpha > 45 && alpha < 136) { 

6 pDirection = ' 左 侧 ' 

} else if (alpha > 225 && alpha < 316) { 

8 pDirection = ' 右 侧 ' 

9 } else if (alpha > 135 && alpha < 226) { 

10 pDirection = "反面 ' 

11 } 

了 有 console.10g(' 你 的 设备 方向 : ', pDirection) 

13 console.1og (' 你 的 设备 偏 移 角 度数 :'，alpha) 

14 }) 


上 上 述 第 5~11 行 代码 表示 根据 图 7.1 坐标 系 , 由 绕 乙 轴 逆 时 针 旋 转 的 角度 判断 设备 的 方向 。 


0 度 (360 度 ) 
x 90 度 设备 屏幕 正 上 方 
270 度 
"如 1go 度 


z™ 


图 7.1 设备 坐标 X/Y 与 地 球 X/Y 重合 坐标 系 
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加 速 计 

加 速 计 用 来 测量 设备 在 XxX、Y、Z 三 个 轴 上 的 加 速 力 。 所 谓 加 速 力 ， ee 
程 中 作用 在 物体 上 的 力 。 小 程序 开发 框架 提供 的 加 速 计 接口 API， 可 以 让 开发 
者 能 够 在 应 用 程序 中 获取 到 设备 当前 的 加 速 力 信息 ， 合 理 利用 这 些 信息 可 以 开 飞 
发 出 有 趣 、 实 用 的 功能 首 

@ wx.start Accelerometer(Object object): 开始 监听 加 速 数据 。object 参数 
及 功能 说 明 如 表 7-10 所 示 。 


表 7-10 ”object 参数 及 功能 说 明 
功 能 


interval 
success 接口 调用 成 功 的 回调 函数 
fail 接口 调用 失败 的 回调 函数 
complete 接口 调用 结束 的 回调 函数 


@ wx.stopAccelerometer(Object objecb: 停止 监听 加 速度 数据 。object 参数 及 功能 说 明 如 
表 7-8 所 示 o 

@ wx.onAccelerometerChange(function callback): 监听 加 速度 数据 变化 事件 ， 调 用 后 会 
自动 开始 监听 。 加 速度 数据 变化 事件 的 回调 函数 callback 返回 值 res 包含 的 属性 如 表 7-11 
所 示 。 


表 7-11 callback 回调 函数 返回 属性 值 及 功能 说 明 
功 能 
六 轴 方 向 加 速 力 
立轴 方向 加 速 力 
乙 轴 方向 加 速 力 


下 面 以 实现 图 7.2 所 示 的 3D 图 片 小 程序 为 例 ， 介 绍 加 速 计 在 实际 开发 中 的 用 法 。 页 面 
结构 代码 如 下 : 
oil 中国 移动 令 10:58 7 5 100% mm 
WeChat 


图 7.2 3D 图 片 效果 图 


245 
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1 ， <button bindtap="start"> 打 开 加 速 计 </button> 
2 xbutton bindtap="stop"> 停 止 加 速 计 </button> 
3 <image animation="{{animationDate}}" src='/images/tuzi.jpg'></image> 


外 打开 加 速 计 按钮 事件 。 


}) 
}, 


oo mw 


starts 
Wzx.startAccelerometer ({ 
interval: "ui'" 


function () { 


@ 停止 加 速 计 按钮 事件 。 


stop: 


function () { 


i 
受 wx.stopAccelerometer () 


3 3}, 


@ 页 面 加 载 事件 。 


1 onLoad: function (options) { 
芝 var that = this; 
3 Wx.onAccelerometerCchange (function (res) { // 监 听 加 速 计数 据 事 件 
4 = Fes Le0 
5 y= res.y * 180 
6 Co ZTTUSN 
yi animation = wx.createAnimation({ 
8 duration: 1000, 
9 timingFunction: 'ease', 
10 }) 
I animation.rotate3d (x,y,2z,180) .step() 
了 that .setData({ 
13 animationDate: animation.export() 
14 }) 
15 1D); 
到 ER 
罗盘 


罗盘 通过 磁力 将 内 部 的 指针 指向 某 个 方向 ， 以 使 进行 方位 判别 。 小 程序 开发 框架 提供 的 
罗盘 接口 API 可 以 将 获取 到 设备 的 指向 信息 应 用 于 导航 系统 小 程序 的 开发 中 。 

GD wx.startCompass (Object object): 开始 监听 罗盘 数据 。object 参数 及 功能 说 明 如 
表 7-12 所 示 。 


表 7-12 object 参数 及 功能 说 明 


属 性 类 型 功 能 
interval String 监听 加 速度 数据 回调 函数 的 执行 频率 。 功 能 说 明 同 表 7-5 
success Function 接口 调用 成 功 的 回调 函数 
fail Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


@@ wx.stopCompass(Object object): 停止 监听 罗盘 数据 。object 参数 及 功能 说 明 如 
表 7-12 所 示 。 
@ wx.onCompassChange (function callback): 监听 罗盘 数据 变化 事件 (频率 :5 次 / 秒 )， 
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调用 后 会 自动 开始 监听 。 罗 盘 数 据 变化 事件 的 回调 函数 callback 返回 值 res 包含 的 属性 如 
表 7-13 所 示 。 


表 7-13 callback 回调 函数 返回 属性 值 及 功能 说 明 


属 性 
direction | Number 


accuracy 


面 对 的 方向 度数 
精度 


由 于 平台 存在 差异 ，accuracy 在 iOS/Android 的 值 不 同 。iOS 平台 的 accuracy 是 一 个 
number 类 型 的 值 ， 表 示 相 对 于 磁 北 极 的 偏差 (0 一 一 设备 指向 正 北 ，90 一 一 指正 东 ，180 一 一 
指向 正 南 ， 以 此 类 推 )。Android 平台 的 accuracy 是 一 个 string 类 型 的 枚 举 值 (high 一 一 高 精 
度 ，medium 一 一 中 等 精度 ，low 一 一 低 精 度 )。 兴国 
7.2.2 ”指南 针 的 实现 

主 界 面 的 设计 

根据 指南 针 的 功能 , 在 主 界面 上 可 以 显示 方向 信息 ( 含 动态 指南 针 图 片 )， 722 
屏幕 朝向 及 当前 设备 的 相关 信息 (品牌 、 型 号 、 微 信 版 本 、 操 作 系 统 、 当 前 电量 )， 其 运行 效 
果 如 图 7.3 所 示 。 


ml 中 国 移动 令 09:21 了 哥 98% Ds 


指南 针 © 


指南 针 方 向 : 西南 方向 (245.60 度 ) 
屏幕 朝向 : 右 侧 (267.96 度 ) 


设备 品牌 : iPhone 

设备 型 号 : iPhone SE<iPhone8,4> 
微 信 版 本 : 7.0.4 

操作 系统 : iOS 12.3.1 

客户 端 ios 

当前 电量 : 98.00% 


图 7.3 ”指南针 界 面 
(1) 页 面 结构 文件 代码 。 


1 <view class='container'> 

到 <view> 指 南 针 方 向 : { {mDirection}} ({ {mpDegree}} 度 ) </view> 

人 3 <view> 屏 幕 朝 向 : { {pDirection}} ({{pDegree}} 度 ) </view> 

4 <image style="transform: rotate({{180-mDegree}}deg);" src='/images/ 
compass.png'></image> 

5 <view class="'info'> 

6 <view class="'item'> 设 备品 牌 : { {brand}}</view> 
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7 <view class='item'> 设 备 型 号 : { {model}}</view> 
8 <view class="'item'> 微 信 版 本 : { {version}}</view> 
9 <view item' > 操作 系统 : { {system} }</view> 


10 <view item'> 客 户 端 : { {platform}}</view> 
YY <view class='item'> 当 前 电量 : { {level}}%</view> 
12 </view> 

13 </view> 


上 述 第 4 行 代码 使 用 css 样式 及 功能 代码 中 获取 的 罗盘 角度 值 控制 image 组 件 加 载 的 指 
南 针 图 片 compass.png 的 旋转 。 
(2) 页 面 样式 文件 代码 。 


出 .containert{ 
height: 100%; 
3 display: flex; 
4 flex-direction: column; 
3 align-items: center; 
GF 
也 jimaget 
8 margin-top: 80rpx; 
9 width:400rpx; 
10 height: 400rpx; 
下 
2 sinfot 
13 margin-top: 80rpx; 
14 } 
15 .item{ 
16 height: 60rpx; 
Ly 
功能 实现 
(1) 定义 变量 。 
二 data: { 
2 mDirection: ' 正 南 '， // 指 南 针 方向 
和 3 mDegree: 90, // 指 南 针 偏 角 
4 pDirection: "正面 '， // 屏 幕 朝向 
5 pDegree: 90, // 屏 幕 朝向 偏 角 
6 brand: '…， /7 品牌 
村 model: '', // 型 号 
8 Version: '', // 微 信 版 本 
9 system: '', // 操 作 系 统 
10 platform: '', // 客 户 端 平台 
level: ' // 电 池 电 量 
Re 
(2) 自 定义 获取 系统 信息 方法 。 
1 getInfo: function () { 
2 var that = this 
| wx.getSystemInfo(t{ 
4 success: function (res) { 
态 that.setDatal({ 
6 brand: res.brand, 
这 model: res.model, 
8 Version: res.version, 
a system: res.system, 
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10 platform: res.platform 
11 }) 

12 人 

13 ]) 

14 js 


上 述 第 3~13 行 代码 调用 wx.getSystemInfo( ) 方 法 获取 信息 系统 ， 并 通过 它 的 success( ) 


回调 函数 分 别 获得 当前 设备 的 品牌 、 型 号 、 微 信 版 本 号 、 操 作 系 统 、 平 台 类 型 等 信息 。 
(3) 自 定义 获取 屏幕 朝向 方法 。 


1 getpDerection: function () { 

4 var that = this 

3 var pDirection = "正面 ' 

4 WwWXK.startDeviceMotionListening({}) // 开 始 监听 设备 方向 
号 wx.onDeviceMotionChange (function (res) { 

6 Var alpha = parseFloat (res.alpha); 

if (alpha > 45 && alpha < 136) { 

8 pDirection = ' 左 侧 ' 

9 } else if (alpha > 225 && alpha < 316) { 
10 pDirection = ' 右 侧 ' 

11 } else if (alpha > 135 && alpha < 226) { 
12 pDirection = ' 反 面 ' 

5 让 1 } 

14 that .setData({ 

下 可 pDegree: alpha.toFixed(2) ， 

16 pDirection: pDirection 

}) 

18 }) 

2 


上 述 第 5~18 行 代码 调用 wx.onDeviceMotionListening( ) 方 法 监听 设备 方向 变化 ， 其 中 第 
6 行 代码 表示 获得 设备 绕 Z 轴 逆 时 针 旋 转 的 角度 数 ， 第 7 行 代码 表示 如 果 旋 转 的 角度 为 
45°~136*， 则 表示 设备 屏幕 朝向 当前 为 “ 左 侧 ”。 

(4) 自 定义 获取 设备 电池 电量 方法 。 


getPower: function () { 
var that = this 
wx.getBatteryInfo({ 
success: function (res) { 
that.setDatal({ 
level: res.level .toFixed(2) 
}) 
} 
}) 
0 反 


PooIaAnoONp 


(5) 自 定义 根据 角度 判断 指南 针 指 向 的 方法 。 
根据 0” 指 向 正 北 、90” 指向 正 东 、180” 指向 正 南 、270” 指向 正 西 的 规定 ， 统 一 指南 
针 的 指向 一 共 可 以 设 定 8 个 方向 ， 每 个 方向 的 罗盘 指向 返回 角度 定义 在 45” 以 内 。 


1 judgeDirection: function (degree) { 

之 var direction = "'" 

3 if (22.5 < degree && degree < 67.5) { 

4 direction = ' 东 北方 向 ' 

} else if (67.5 < degree && degree < 112.5) { 
6 direction = ' 正 东方 向 ' 
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7 } else if (112.5 < degree && degree < 157.5) { 
[ direction = ' 东 南方 向 ' 

9 } else if (157.5 < degree && degree < 202.5) { 
10 direction = ' 正 南方 向 ' 

11 } else if (202.5 < degree && degree < 247.5) { 
中 2 direction = ' 西 南方 向 " 

| } else if (247.5 < degree && degree < 292.5) { 
14 direction = ' 正 凸 方向 ' 

是 所 } else if (292.5 < degree && degree < 337.5) { 
16 direction = ' 西 北方 向 ' 

和 } else { 

18 direction = ' 正 北方 向 ' 

19 } 

20 return direction 

站 le 


(6) 页 面 加 载 事 件 。 
当 指 南 针 小 程序 启动 时 ， 就 需要 直接 加 载 罗盘 数据 变化 事件 ， 以 便 及 时 获取 罗盘 指向 角 
度 ， 并 根据 角度 调用 自 定义 判断 方向 的 judgeDirection( ) 方 法 更 新 页 面 上 的 指南 针 方向 值 。 


1 getPower: function () { 

2 onLoad: function (options) { 

3 this .getInfo() // 获 取 系 统 信息 
4 this .getPower () // 获 取 电 池 电 量 
与 this .getpDerection() // 获 取 屏 幕 方向 
6 var that = this 

7 wx.onCompassChange (function (res) { /7 监听 罗盘 数据 变化 
8 var degree = res.direction.toFixed(2); 

9 that. setDatal({ 

10 mDegree: degree, 

11 mDirection: that.judgeDirection (degree) 

ly }) 

3 }) 

a 


随 着 移动 平台 的 崛起 ， 越 来 越 多 的 传统 PC 软件 被 移植 到 移动 平台 ， 比 如 ipad、iPhone、 
Android 等 智能 终端 设备 。 本 节 以 微 信 小 程序 框架 提供 的 振动 、 添 加 联系 人 、 拨 号 等 接口 API 
为 例 ， 实 现 一 个 多 功能 、 全 方位 的 个 性 化 闹钟 小 程序 ， 为 用 户 的 日 常生 活 提供 便携 、 准 时 的 
提醒 服务 。 
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添加 联系 人 

(1) wx.addPhoneContact(Object object): 添加 手机 通讯 录 联 系 人 。 用 户 可 
以 选择 将 表单 内 容 以 “新 增 联系 人 ”或 “添加 到 已 有 联系 人 ”的 方式 写 入 终端 狗 
设备 的 通讯 录 。object 参数 及 功能 说 明 如 表 7-14 所 示 。 

在 微 信 小 程序 开发 中 , wx.addPhoneContact( 方 法 通常 与 页 面 表单 配合 使 用 
下 面 以 实现 图 7.4 为 例 介 绍 wx.addPhoneContact( ) 的 用 法 。 


授 D 第 7 章 硬件 设备 应 用 开发 蕊 可 


表 7-14 object 参数 及 功能 说 明 


属 性 类 型 功 能 属 性 功 能 
firstName String 名 字 photoFilePath i 头像 本 地 文件 路 径 
nickName String 昵称 lastName 了 姓氏 
middleName String 中 间 名 Temark i 备注 
mobilePhoneNumber | String 电话 号 码 i 微 信号 


organization String 公司 i i 职位 


email String 电子 邮件 i 网 站 


ee WeChars 1537 


新 增 联系 人 


新 增 联系 人 信息 
单位 名 称 
请 输入 单位 名 称 


请 输入 职位 
电子 邮箱 

请 输入 电子 邮箱 
电话 号 码 

请 输入 电话 号 码 


添加 


图 7.4 添加 联系 人 图 7.5 拨号 
(2) 页 面 结 构 文件 代码 。 


1 <form bindsubmit="formSubmit" bindreset="formReset"> 

2 <view class="detail"> 

过 <text style='width:100%;background: #DBE5B3'> 新 增 联系 人 信息 </text> 

4 <view class='rowline'> 单 位 名 称 </view> 

5 <input style="'width:100%' name="icompany" placeholder=" 请 输入 单位 名 称 " /> 
6 <view class='rowline' style='display:flex'> 

J <view style='width:50%'> 名 字 </view> 

8 <view style='width:40%'> 姓 氏 </view> 

9 </view> 

10 <view style='display:flex'> 

11 <input style='width:50%' name="ifirstname" /> 

12 <input style='width:40%' name="ilastname" /> 

3 </view> 

14 <view class='rowline'> 职 位 </view> 

15 <input style='width:100%' name="izhiwei" placeholder=" 请 输入 职位 "” /> 
16 <view class='rowline'> 电 子 邮 箱 </view> 

和 法 <input style='width:100%' name="iemail" placeholder=" 请 输入 电子 邮箱 " /> 
18 <view class='rowline'> 电 话 号 码 </view> 

19 <input style='width:100%' name="itelphone" placeholder=" 请 输入 电话 号 码 " /> 
20 <view class="btn-area"> 

2 <button size="mini" form-type="submit"> 添 加 </button> 

2 <button size="mini" form-type="reset"> 重 置 </button> 

23 </View> 


24 </view> 
25 </form> 
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上 述 第 5、11、12、15、17 和 19 行 代码 为 input 组 件 的 name 属性 指定 名 称 ， 以 便 在 提 
交 表 单 时 根据 名 称 将 获取 的 “单位 名 称 ”“ 名 字 ?“ 姓 氏 ”“ 职 位 ”%““ 电 子 邮箱 ”和 “电话 号 码 ” 
等 值 添加 到 通讯 录 中 。 

(3) 页 面 样式 文件 代码 。 


.detail { 

迷 padding-left: 20rpx; 
padding-right: 20rpx; 
4 display: flex; 

2 flex-direction: column; 
6 

* .rowline { 

8 padding-top: 1l0rpx; 

9 padding-bottom: 10rpx; 
0 

11 input { 

I border: 2rpx solid gainsboro; 
> 


14 button { 

35 margin-top: 25rpx; 

16 background-color: #DBE5B3; 
2 width: 50%; 

18. 


(4) 提交 表单 事件 代码 。 


1 formsubmit: function (e) { 

次 var that = this 

3 var info = e.detail.value // 获 取 表 单 提交 数据 
4 wx.addPhoneContact ({ 

5 organization:info.icompany, // 公 司 名 称 
6 firstName:info.firstName, // 名 字 

7 lastName:info.1astName, // 姓 氏 

8 title:info.izhiwei, // 职 位 

9 email:info.email, // 电 子 邮 箱 
10 mobilePhoneNumber: info.telphone， // 电 话 号 码 
二 业 success:function (res){ 

ee console.1og (' 联 系 人 添加 成 功 ') 

13 } 

14 }) 

9 


上 述 第 4~14 行 代码 调用 wx.addPhoneContact( ) 方 法 , 将 表单 提交 的 联系 人 信息 添加 到 通 
讯 录 中 。 

拨打 电话 

wx.makePhoneCall(Object object): 拨打 电话 。object 参数 及 功能 说 明 如 表 7-15 所 示 。 


表 7-15 ”object 参数 及 功能 说 明 


属 性 能 
phoneNumber | String 需要 拨打 的 电话 号 码 
success | Function 接口 调用 成 功 的 回调 函数 


接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 


fail 
complete 


Function 
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例如 ， 要 实现 如 图 7.5 所 示 的 拨号 效果 ， 可 以 使 用 如 下 代码 : 


1 wx.makePhoneCall ({ 
phoneNumber: "110'  /// 仅 为 示例 ， 可 以 用 真实 电话 号 码 代 替 
=: 


振动 
(1 ) wx.vibrateShort(Object object): 使 手机 发 生 较 短 时 间 的 振动 (15 ms)。 仅 在 iPhone 7/ 
7Plus 以 上 及 Android 机 型 上 生效 。object 参数 及 功能 说 明 如 表 7-16 所 示 。 


表 7-16 object 参数 及 功能 说 明 


属 性 功 能 


success | Function 接口 调用 成 功 的 回调 函数 
fail | Function 接口 调用 失败 的 回调 函数 
complete Function 接口 调用 结束 的 回调 函数 


(2) wx.vibrateLong(Object object): 使 手机 发 生 较 长 时 间 的 振动 (400 ms )。 参数 
及 功能 说 明 如 表 7-16 所 示 。 


7.3.2 个 性 化 闸 钟 的 实现 


个 性 化 闹钟 小 程序 主要 包含 闹钟 列表 页 面 (图 7.6), 新 增 闹钟 页 面 (图 7.7) 日 
和 闪 钟 详情 页 面 (图 7.8、 图 7.9) 等 , 闹钟 列表 页 面 、 新 增 闹钟 页 面 需要 以 tabBar 
的 形式 展示 。 


7.3.2.1 


iT 选择 一 个 类 别 
已 完成 商务 谈判 预约 电话 
工人 会议 “其 他 


图 7.6 闹钟 列表 页 面 图 7.7 新 增 闹钟 页 面 
闸 钟 列表 页 面 用 于 展示 已 经 设置 任务 的 闹钟 事项 ， 用 户 单 击 曾 钟 事项 后 打开 闭 钟 详情 页 


面 。 新 建 闹 钟 页 面 可 供用 户 新 建 闸 钟 事项 。 闲 钟 详情 页 面 分 两 种 情况 展示 闲 钟 事项 的 具体 内 
容 : (1) 若 在 闹钟 列表 页 面 单 击 的 闹钟 事项 属于 非 预约 电话 类 别 事 项 ， 则 该 页 面 仅 显示 该 事 
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项 的 相关 信息 ， 其 显示 效果 如 图 7.8 所 示 ; 〈2) 若 在 闹钟 列表 页 面 单 击 的 闹钟 事项 属于 预约 
电话 类 事项 ， 则 该 页 面 上 半 部 分 显示 该 事项 的 相关 信息 ， 下 半 部 分 显示 “新 增 联系 信息 ”的 
表单 ， 用 于 向 通讯 录 中 添加 联系 人 ， 其 显示 效果 如 图 7.9 所 示 。 


eeee WEeChais 17:02 


ZU17-1-22 四 
电话 号 码 【 挨 号 】 【新 建 联系 人 ]】 
110 


请 输入 电子 邮箱 
电话 号 码 
请 输入 电话 号 码 
添加 
图 7.8 闹钟 详情 页 面 (1) 图 7.9 闹钟 详情 页 面 (2) 
项 目 创建 


根据 个 性 化 闹钟 小 程序 的 功能 需求 ， 需 要 在 小 程序 项 目下 的 pages 文件 夹 下 创建 3 个 文 
件 夹 ， 分 别 用 于 存放 闸 钟 列表 页 面 (tasklist)、 新 增 闹钟 页 面 (newtask〉 和 闹钟 详情 页 面 
(taskinfo ) 。 

tabBar 顶部 标签 的 设计 

修改 appjson 全 局 配置 文件 的 windows 项 和 tabBar 项 ， 其 详细 代码 如 下 : 


1 "window": { 

有 "backgroundTextstyle": "light", 

入 "navigationBarBackgroundColor": "#D5D3B3", 
4 ”navigationBarTitleText": "个 性 闹钟 "， 

5 ”navigationBarTextStyle": "black" 

6 1}, 

1 "tabBar®= 

8 "backgroundColor":"#D5D3B3", 

9 "position": "top", 


a 
{ 
"pagePath": "pages/tasklist/tasklist", 
"text": "闹钟 列表 " 
}, 
{ 
"pagePath": "pages/newtask/newtask"， 
"text": "新 建 闹钟 " 
} 
] 


PcppPppppPPPPPp 
oamwm 必 wh 
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20 } 


上 述 第 3 行 代码 设置 小 程序 navigationBar 导航 栏 的 颜色 ; 第 8 行 代码 设 置 小 程序 tabBar 
标签 的 颜色 ， 第 9 行 设置 小 程序 ttbBar 标签 位 于 页 面 的 顶部 。 

图 新 增 闸 钟 页 面 的 设计 与 实现 

(1) 新 增 闹钟 页 面 设计 。 

从 图 77 可 以 看 出 整个 页 面 需要 提交 的 内 容 包括 闹钟 事项 类 别 ， 标 题 ， 计 回 
划 时 间 (日 期 和 时 间 )。 计 划 地 点 /电话 号 码 ( 若 选择 的 闹钟 事项 类 别 为 预约 电 。 “322 
话 ， 则 显示 电话 号 码 ， 和 否则 显示 计划 地 点 ) 及 备注 信息 。 这 些 信息 的 输入 可 以 由 页 面 表单 来 
实现 ， 其 中 闻 钟 事项 类 别 由 radio-group 和 radio 组 成 单 选 按钮 组 实现 ， 其 他 供用 户 输入 信息 
的 区 域 由 input 组 件 实现 ， 为 了 保证 提交 表单 时 能 够 区 分 具体 的 输入 值 ， 还 需要 给 每 个 组 件 
设置 name 属性 。 

@ 页 面 结构 文件 代码 。 


1 <view class="container"> 

2 <form bindsubmit="formSubmit"” bindreset="formReset"> 

3 <view class="taskpage"> 

4 <view class="category"> 

<view class="title"> 选 择 一 个 类 别 </view> 

6 <radio-group name="icategory" bindchange='selectCategory'> 

了 <view class="item"> 

8 <radio value="1"> 商 务 谈判 </radio> 

9 <radio value="2"> 预 约 电 话 </radio> 

10 </View> 

11 <View class="item"> 

le <radio value="3"> 工 作 会 议 </radio> 

13 <radio value="4"> 其 他 </radio> 

14 </view> 

15 </radio-group> 

16 </view> 

3 <view class="detail"> 

18 <view class="title"> 详 细 内 容 </view> 

19 <view class='rowline'> 闹 钟 标题 </view> 

20 <input name="ititle" placeholder=" 请 输入 标题 " /> 

Bil <view class='rowline'> 计划 时 间 </view> 

22 <view style='display:flex'> 

23 <input name="idate" value="{{phdate}}" /> 一 

24 <input name="itime" value="{{phtime}}" /> 

25 </View> 

26 <view class='rowline'> {addressOrTel}}</view> 

| <input name="iaddress" placeholder=" 请 输入 { {addressorTel;}" /> 

28 <view class='rowline'> 备注 </view> 

29 <textarea class="memo" name='imemo' placeholder=" 请 输入 备注 内 容 "> 
</textarea> 

30 </view> 

3 <view class="btn-area"> 

3 <button size="mini" form-type="submit"> 提 交 </button> 

33 <button size="mini" form-type="reset"> 重 置 </button> 

34 </view> 


35 </view> 
36 </form> 


上 述 代码 第 6~15 行 用 radio-group 和 radio 组 件 实现 闵 钟 事项 类 别 选 择 的 单 选 按 钮 组 , 并 
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设置 每 个 类 别 radio 的 value 属性 值 ， 


以 便 根 据 返回 的 值 判断 事项 类 别 ; 


第 26~27 行 用 绑 定 的 


addressOrTel 变量 控制 页 面 显示 计划 地 点 或 电话 号 码 。 


@ 页 面 样式 文件 代码 。 


2 .taskpage { 

之 background: #d5d3b3; 

| display: flex; 

4 flex-direction: column; 
align-items: center; 
7200 

到 -Category { 

8 display: flex; 

9 flex-direction: column; 
10 align-items: center; 
了 width: 95%; 

12 padding-top: 25rpx; 

:上 ; 

14 radio .wx-radio-input { 
15: background-color: #dbe5b3; 
16 width: 40rpx; 

E height: 40rpx; 

8 

9 Etle 二 

20 background: #dbe5b3; 
2 width: 100%; 

22 text-align: center; 
3 

24 .item { 

25 padding-top: 25rpx; 

26 display: flex; 

27 flex-direction: row; 
28 align-content: space-around; 
pd 

30 .detail { 

31 width: 95%; 

3 padding-top: 25rpx; 
S30 

34 .rowline { 

35 padding-top: 10rpx; 

36 padding-bottom: 10rpx; 
Sk 

38 input { 

39 border: 2rpx solid gainsboro; 
40 } 

41 .memo { 

42 border: 2rpx solid gainsboro; 
43 height: 200rpx; 

44 } 


上 述 第 14~18 行 代码 用 于 自 定义 radio 组 件 的 样式 。 在 小 程序 的 页 面 设计 中 ， 
定义 radio 组 件 的 样式 , 必须 使 用 .wx-radio-input 样式 类 名 , 然后 在 该 样 
定义 相关 


属性 值 。 
(2) 新 增 闹钟 页 面 功能 实 


人 有 a 处 理 成 


“yyyy-mm-dd” 的 日 期 格式 和 “时 时 :分 分 ”的 时 间 


EE 


曾 的 对 应 位 置 ， 然 后 读 取 存放 在 本 地 缓存 的 闹钟 导 


如 果 要 自 
式 类 中 澡 ; 


7-3.2.3 


格式 ， 并 更 新 到 新 增 闹钟 页 
有 项 infos，infos 由 icategory (事项 类 别 )、 


ititle〈 标 题 )、idate〈 计 划 日 期 )、itime〈 计 划 时 间 )、iaddress〈 计 划 地 点 /电话 号 码 )、imemo 


( 


备注 ) 和 ifinish (是 否 完成 ) 等 属性 组 成 ， 


以 便 将 新 增 的 闹钟 导 


项 添加 进去 。 
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Q 初始 化 数据 。 
1 data: { 
4 addressOrTel: "计划 地 点 ", // 计 划 地 点 /电话 号 码 
3 infos:[]， // 存 放 闹 钟 事项 
4 phdate:' // 计 划 日 期 
局 phtime:"'" // 计 划 时 间 
6 1}, 

@ 页 面 加 载 监听 事件 。 
2 onLoad: function (options) { 
2 var that = this 
3 var date = new Date() // 获 取 当 前 系统 日 期 时 间 
4 Var year = date.getFullYear() 
3 Var month = date.getMonth() + 1 
6 var day = date.getDate() 
六 Var hour = date.getHours () 
8 var minute = date.getMinutes () 
9 Var phdate = yeart+"-"+month+"-"+day 
10 var phtime = hour+":"+minute 
5 this.setDatal({ 
E phdate:phdate, 
413 phtime:phtime 
4 }) 
ER wx.getstorage ({ 
16 key: 'infos', 
E success: function (res) { 
18 that .setData({ 
19 infos:res.data 
20 }) 
21 }, 
22 }) 
23 }, 


上 述 第 15~22 行 代码 实现 从 本 地 缓存 读 出 已 添加 的 闹钟 事项 。 

@ 选择 闹钟 事项 类 别 事件 。 

为 了 能 够 实现 用 户 选 择 的 闹钟 事项 为 预约 电话 时 ， 页 面 对 应 位 置 显 示 “ 电 话 号 码 ” 否 
则 显示 “计划 地 点 ”代码 实现 时 根据 用 户 选 择 radio 组 件 的 返回 值 进行 判断 ， oo 
2， 则 表示 闹钟 事项 为 预约 电话 。 


二 selectCategory: function (e) { 
这 Var category = e.detail.value 
3 console.log(e.detail .value) 

4 if (category == 2) { 

5 this.setData({ 

6 addressorTel: ' 电 话 号 码 ' 

7 }) 

8 

沪 


} else { 
this.setDatal({ 
10 addressOrTel1: ' 计 划 地 点 ' 
1 1) 
12 3 
3 
外 提交 表单 事件 。 


用 户 单 击 新 增 闹 钟 页 面 的 “提交 ”按钮 时 ， 首 先 取出 由 edetailvalue 返回 的 当前 表单 输 
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入 的 数据 内 容 ， 然 后 将 数据 内 容 添加 到 infos 数组 中 ， 最 后 将 该 数组 写 入 本 地 缓存 保存 。 


1 formsubmit: function (e) { 

2 var that = this 

3 var info = e.detail.value 

4 info.ifinish = false // 默 认 新 增 闹钟 事项 没有 完成 
5 this.data.infos.push (info) 

6 WwWX-SetStorage ({ 

这 keys YinEOS 

8 data: this.data.infos, 

3] }) 

10 }, 


为 了 在 闹钟 列表 页 面 显 示 闹 钟 事项 内 容 时 能 够 直观 反映 事项 的 完成 状况 ， 上 述 第 4 行 代 
码 表示 给 每 个 事项 增加 一 个 ifinish 属性 ， 如 果 属 性 值 为 tue， 则 表示 事项 已 经 回 
完成 ， 否 则 表示 未 完成 。 

闹钟 列表 页 面 的 设计 与 实现 

(1) 闹钟 列表 界面 设计 。 

从 图 7.6 可 以 看 出 闹钟 列表 页 面 每 行 显示 的 闹钟 事项 信息 包括 标题 、 剩 余 
时 间 及 完成 状况 ， 设 计 如 图 7.10 所 示 。 


view 一 例 计时 
view 一 闹钟 事项 标题 -一 一 一 一 一 
view 一 完成 状况 


图 7.10 ”闹钟 列表 页 面 每 行 闹钟 事项 信息 显示 设计 效果 图 
Q@ 页 面 结构 文件 代码 。 


<view class='clocklist'> 
<scroll-view scroll-y style='height:90%'> 
<View wx:for='{{infos}}'> 
<view id='{{index}}' bindtap="'showInfo' class='item'> {{index+1}}. 
{ item.ititle}} 
5 <view wx:if='{{item.ifinish}}' style="color:red;"> 已 完成 </view> 
6 <View class="notice" wx:else> 
7 
8 


<view>{{lasttime[index] }}</view> 
<view> 计 划 中 </view> 

9 </view> 

10 </view> 

11 </view> 

12 </scroll-view> 

13 </view> 


上 述 第 3~11 行 代码 用 wx:for 语句 绑 定 infos 数组 进行 列表 演 染 ,infos 数组 中 存放 闹钟 事 
项 的 相关 信息 。 其 中 第 5~9 行 代码 用 wx: 站 语句 绑 定 infos 数 组 元 素 的 fnish 值 ,如果 值 为 true， 
则 显示 红色 的 “已 完成 ”否则 由 lasttime 数组 元 素 表 示 的 剩余 时 间 和 “计划 中 ”。 

@ 页 面 样式 文件 代码 。 


地 Page { 

2 width: 100%; 

3 height: 100%; 

4 background: #D5D3B3; 
6 .Clocklist { 
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7 padding-left: 20rpx; 

8 padding-right: 20rpx; 

Se 

10 -item { 

11 display: flex; 

12 justify-content: space-between; 
3 align-items: center; 


14 padding-top: 15rpx; 

15 padding-bottom: 15rpx; 

16 border-bottom: 2rpx dotted grey; 
A 


上 述 第 16 行 代码 用 于 定义 每 行 闹钟 事项 信息 的 底部 显示 点 虚线 。 
(2) 闹钟 列表 页 面 功 能 实现 。 . 
当 运 行 个 性 化 闹钟 小 程序 时 ,首先 加 载 闹钟 列表 页 面 (tasklist.wxml), 该 号 
页 面 每 次 显示 时 都 需要 从 本 地 缓存 取出 已 经 添加 的 闹钟 事项 信息 ,并 以 图 7.10 
所 示 格 式 显 示 在 页 面 上 。 用 户 单 击 某 行 闹钟 事项 时 ， 打 开 亲 钟 详情 页 面 
(taskinfo.wxml )。 
Q@ 定义 页 面 全 局 变量 。 
1 var last = [] ”// 剩 余 时 间 ( 单 位 :ms) 
2 var interval ”// 周 期 事件 函数 


@ 初始 化 数据 。 


data: { 

infos: []， // 闹 钟 事项 

lasttime: [] // 剩 余 时 间 (天 、 小 时 、 分 钟 、 秒 格式 ) 
7 


MODP 


@ 自 定义 时 间 转 换 格式 方法 。 
为 了 在 页 面 上 显示 “** 天 ** 小 时 ** 分 钟 ** 秒 ”格式 的 剩余 时 间 ， 本 项 目 案例 自 定义 了 
getLastTime(lasttime) 方 法 ，lasttime 参数 的 时 间 单 位 为 毫秒 。 其 详细 代码 如 下 : 


1 getLastTime: function (lasttime) { 

2 var days = parseInt (lasttime / (1000 * 60 * 60 * 24)); 

3 Var hours = parseInt ((lasttime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 
4 var minutes = parseInt ((lasttime % (1000 * 60 * 60)) / (1000 * 60)); 

总 Var seconds = (lasttime % (1000 * 60)) / 1000; 

6 return days+' 天 '+hours+" 小 时 "+minutes+" 分 钟 "+seconds .toFixed (0)+" 秒 " 
2 


外 页 面 显示 监听 事件 。 
每 次 显示 曾 钟 列表 页 面 时 ， 都 需要 从 本 地 缓存 读 取 已 经 添加 的 闹钟 事项 和 开启 周期 事件 
函数 ， 所 以 需要 在 onShow( ) 函 数 中 实现 这 些 功 能 。 


1 onshow: function () { 

2 var that = this 

3 wx.getstorage ({ 

4 key: "infos'"'， 

3 success: function (res) { 
6 that .setData({ 

infos: res.data 

8 }) 

9 }, 
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10 1) 

由 interval = setInterval(() => { 

12 for (var i = 0; i < that.data.infos.length; i++) { 

JS // 根 据 设 定 的 计划 完成 日 期 、 时 间 转 换 为 Date () 格式 

14 Var udate=new Date (that .data.infos i].idate+''+ that.data.infos[i]. 
itime) 

et // 获 取 当 前 日 期 、 时 间 

16 var sdate = new Date () 

a // 计 划 时 间 -当前 时 间 ， 单 位 : 毫秒 

18 last[i] = udate.getTime() - sdate.getTime () 

19 if (last[i] <= 0 && that.data.infos[i].ifinish == false) { 

20 // 如 果 毫 秒 =0， 表 示 已 经 完成 

2 that .data.infos [i] .ifinish = true 

和 22 last[i] = 0 

23 wx.VvibrateLong() // 如 果 时 间 到 并 且 isfinish 为 false 时 振动 

24 } 

5 that.data.lasttime[i] = that.getLastTime (last[i]) 

26 } 

27 that .setData({ 

28 lasttime: that.data.lasttime, 

29 infos: that.data.infos 

30 }) 

3 wx.setstorage ({ 

法 key:" "infos"y 

33 data: that.data.infos, 

34 }) 

3 }, 1000) 

36 1}, 


上 述 第 11~35 行 代码 定义 了 一 个 周期 函数 interval( ), 该 周期 函数 每 隔 1 秒 钟 要 执行 3 个 
主要 任务 : (1) 计算 闹钟 事项 剩余 时 间 ， 如 果 某 逆 钟 事项 的 剩余 时 间 为 0， 并 且 该 事项 的 
ifinish 值 为 f@lse， 则 开启 振动 效果 ; (2〉 更 新 infos 数组 及 lastime 数组 值 ， 以 便 将 最 新 信息 
显示 到 页 面 上 ; (3) 将 更 新 后 的 infos 数组 写 入 本 地 缓存 。 

@ 单 击 闹钟 事项 跳 转 页 面 事件 。 
1 showInfo: function (e) { 
2 wx.navigateTo ({ 
3 url: '/pages/taskinfo/taskinfo?id=' + e.target.id, 
4 
5 


}) 
}, 


单 击 页 面 上 的 某 个 闹钟 事项 后 ， 为 了 在 闹钟 详情 页 面 上 显示 该 事项 的 详细 内 容 ， 上 述 第 
3 行 代码 在 进行 页 面 跳 转 时 ， 通 过 传递 单 击 的 闹钟 事项 在 infos 数组 的 下 标 (id 值 ) 实现 。 

闹钟 详情 页 面 的 设计 与 实现 

(1) 益 钟 详情 界面 设计 。 

从 图 7.8、 图 7.9 的 显示 效果 可 以 看 出 ， 对 于 所 有 分 类 的 闹钟 事项 ， 其 闹 
钟 详情 页 面 上 半 部 分 显示 的 内 容 大 致 相同 , 而 下 半 部 分 只 有 预约 电话 类 事项 才 加 
会 显示 ， 所 以 实现 时 可 以 将 下 半 部 分 用 display 属性 值 进 行 控制 。 0 
中 页 面 结构 文件 代码 。 
<view class="detail"> 

<view class="title"> 
<text> 详 细 内 容 </text> 


<text bindtap="delInfon> 删 除 </text> 
</view> 


pODNP 


迁 中 第 7 章 硬件 设备 应 用 开发 加 了 


6 <view class='rowline'> 闹 钟 标题 </view> 

7 <input name="ititle" value="'{{ititle}}' /> 

8 <view class='rowline'> 计划 时 间 </view> 

号 <view style='display:flex'> 

10 <input style: idth:50%" name="idate" value: {tidatey}}” />= 


oh <input style="width:50%" name="itime" value="{{itime}}" /> 
12 </view> 
13 <view class='rowline' style="display:flex"> {{addressOrTel}} 


14 <view style="color:red;display:{{isTel}}"> 

15 <text bindtap="callTel">【 拨 号 】</text> 

16 <text bindtap="addContact">【 新 建 联系 人 】</text> 
27 </view> 


18 </view> 

19 <xinput name="iaddress" value="{{iaddress}}" /> 

20 <view class='rowline'> 备注 </view> 

21 <textarea class="memo" name="'imemo' value="{{imemo}}"></textarea> 

22 </view> 

23 <form style="display:{{isContact}}" bindsubmit="formSubmit" bindreset= 
"formReset"> 

24 <view class="detail"> 

25 <text class="title"> 新 增 联 系 人 信息 </text> 


26 <view class='rowline'> 单 位 名 称 </view> 

27 <input name="icompany"” placeholder=" 请 输入 单位 名 称 "” /> 
28 <view class='rowline' style='display:flex'> 

29 <view style="width:50%"> 名 字 </view> 

30 <view style="width:50%"> 姓 氏 </view> 

30 </view> 

3 <view style='display:flex'> 

33 <input style="width:50%" name="ifirstname" /> 

34 <input style="width:50%" name="ilastname" /> 

< </view> 

36 <view class='rowline'> 职 位 </view> 

37 <input name="izhiwei" placeholder=" 请 输入 职位 "” /> 

38 <view class='rowline'> 电 子 邮 箱 </view> 

39 <input name="iemail" placeholder=" 请 输入 电子 邮箱 " /> 
40 <view class='rowline'> 电 话 号 码 </view> 

41 <input “name="itelphone" placeholder=" 请 输入 电话 号 码 "” /> 
42 <View class="btn-area"> 

43 <button size="mini" form-type="submit"> 添 加 </button> 
44 <button size="mini" form-type="reset"> 重 置 </button> 
45 </view> 


46 </view> 
47 </form> 


上 述 第 1~22 行 代码 用 于 显示 亲 钟 事项 的 具体 内 容 ， 其 中 第 14~17 行 代码 表示 当前 要 显 
示 的 曾 钟 事项 属于 预约 电话 类 别 时 才 会 显示 。 第 24~47 行 代码 表 示 当 前 显示 的 闹钟 事项 属于 
预约 电话 类 别 ， 则 在 用 户 单 击 “ 新 建 联系 人 ”后 会 显示 新 增 联系 人 表单 。 

@ 页 面 样式 文件 代码 。 


page { 
height: 100%; 
width:100%; 
background: #D5D3B3; 
} 
.title { 
display: flex; 
justify-content: space-between; 
background: #DBE5B37 


opowamwm 必 wm 
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10 width: 100%; 

kh 

2 dela 

3 padding-left: 20rpx; 
14 padding-right: 20rpx; 
| display: flex; 

16 flex-direction: column; 
A 

18 .rowline { 

19 padding-top: 10rpx; 
20 padding-bottom: 10rpx; 


ZI 

22 input { 

和 23 border: 2rpx solid gainsboro; 
a 


25 .memo { 

26 border: 2rpx solid gainsboro; 
27 height: 200rpx; 

220 

29 button { 

30 margin-top: 25rpx; 

3 background-color: #DBE5B3; 

号 2 width: 50%; 

3 


(2) 闹钟 详情 页 面 功能 实现 。 

当 加 载 闹钟 详情 页 面 〈taskinfo.wxml) 时 ， 首 先 需要 从 本 地 缓存 取出 已 经 添加 的 闹钟 事 
项 信息 ， 并 存放 到 infos 数组 中 ， 然 后 根据 闹钟 列表 页 面 传递 的 id 值 ， 从 infos 数组 中 读 出 该 
闹钟 事项 的 具体 内 容 ， 该 庆 值 取出 后 ， 存 放 在 页 面 全 局 变量 index 中 。 

@ 初始 化 数据 。 


data: { 

2 EE // 标 题 

3 idate:'', // 日 期 

4 itime:"'', // 时 间 

5 addressorTel:' 计 划 地 点 '， 

6 iaddress:'', // 计 划 地 点 /电话 号 码 
及 imemo:"'', // 备 注 

8 infos:[], 

9 isTel:'none', // 显 示 “ 拨 号 ” 

10 isContact:"none' // 显 示 “ 新 建 联系 人 信息 ”表单 
11 上 


@ 页 面 加 载 监听 事件 。 


onLoad: function (options) { 
2 var that = this 

3 index = options .id 

4 wx.getstorage ({ 

5 key: 'infos', 

6 success: function (res) { 
that .setData({ 

8 infos:res.data 


总 | 

10 Var icategory = that.data.infos[index] .icategory 
本 if(icategory == 2 ){ 

32 that .data.addressOrTel =' 电 话 号 码 '， 


13 that .data.isTel="'block" 
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14 ph 

15 var ititle = that.data.infos[indezxz] -ititle 
16 var idate = that.data. infostlindexz]l.idate 
了 Var itime = that.data.infos[index] .itime 
18 var iaddress = that.data.infos[index] .iaddress 
19 Var imemo = that.data.infos[index] .imemo 
20 that .setData({ 

21 ititle: ititle, 

4 idate: idate, 

2 itime: itime, 

24 iaddress: iaddress, 

25 imemo: imemo, 

26 addressOrTel:that.data.addressOrTel,， 

2 isTel:that .data.isTel 

28 }) 

29 }, 

30 }) 

31 }, 


上 述 第 4-30 行 代码 表示 ， 在 页 面 加 载 时 ， 从 本 地 缓存 中 读 出 已 添加 的 闹钟 事项 ， 如 果 
读 出 成 功 ， 则 根据 在 闹钟 列表 页 面 单 击 的 某 闹钟 事项 后 传递 的 id 值 取出 闹钟 事项 具体 内 容 ， 
并 判断 该 事项 是 否 属于 预约 电话 类 别 , 如 果 为 预约 电话 事项 , 则 addressOrTel 的 值 设置 为 “ 电 
话 号 码 ” isTel 的 值 设置 为 block， 其 他 内 容 都 更 新 到 绑 定 的 页 面 变量 。 

@ 单 击 拨号 事件 。 


于 callTel:function(){ 

之 var that = this 

3 wx.makePhoneCall ({ 

4 phoneNumber: that.data.iaddress 
5 }) 

6 }, 


@ 单 击 新 增 联系 人 事件 。 


> addCcontact:function(){ 
this.setDatal({ 

3 isContact:true 
4 }) 

So 


@ 单 击 删除 事件 。 


delInfo:function(){ 
var infos = this.data.infos 
infos.splice (index,1) // 从 index 开始 删除 1 个 元 素 
wx.setstorage({ 
key: infos 
data: infos, 
}) 


o wammwm 必 wm 


]， 


在 闹钟 详情 页 面 单 击 “删除 ”后 ， 可 以 删除 当前 页 面 显示 的 闹钟 事项 。 第 3 行 代码 表示 
从 infos 数组 中 删除 index 下 标的 元 素 ， 第 4-7 行 表示 将 删除 元 素 的 infos 数组 重新 写 入 本 地 
缓存 中 
@ 添加 联系 人 按钮 事件 。 


二 formsubmit: function (e) { 
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部 var that = this 

有 var info = e-detail.value 

4 wx.addPhoneContact ({ 

5 organization:info.icompany, // 公 司 名 

6 firstName:info.firstName, /7 名 字 

了 lastName:info.1astName, // 姓 氏 

8 title:info.izhiwei, // 职 位 

9 email:info.email, // 电 子 邮箱 
10 mobilePhoneNumber: that.data.iaddress, // 电 话 号 码 
内 success:function (res){ 

Ee } 

13 }) 

了 }, 


上 述 第 4~13 行 代 码 调用 wx.addPhoneContact( ) 方 法 向 通讯 录 添 加 联系 人 信息 , 其 中 公司 
名 、 名 字 、 姓 氏 、 职 位 和 电子 邮箱 由 提交 的 表单 值 提 供 ， 而 电话 号 码 是 由 该 闹钟 事项 的 具体 
内 容 提供 。 

至 此 ， 个 性 化 闹钟 功能 设计 完成 。 本 项 目 案例 将 闹钟 事项 存储 在 本 地 缓存 ， 读 者 学 习 完 
第 8 章 内 容 后 ， 也 可 以 将 本 项 目 中 的 闹钟 事项 存储 在 小 程序 云 平台 的 云 存储 空间 。 


Se 


本 章 首先 详细 介绍 了 监测 设备 状态 、 跟 踪 用 户 行为 和 获取 传感器 数据 等 API 的 使 用 方法 ， 
然后 结合 具体 的 案例 项 目 介绍 罗盘 API、 设 备 方向 API、 加 速 计 API 及 振动 API 的 应 用 开发 
过 程 和 实现 方法 。 通 过 本 章 的 学 习 ， 读 者 可 以 掌握 一 些 与 硬件 相关 的 小 程序 应 用 开发 技术 ， 
从 而 结合 实际 项 目 需求 开发 出 更 多 有 趣 、 有 用 的 小 程序 。 


网 络 应 用 与 云 开发 


随 着 移动 互联 网 技术 的 发 展 ， 越 来 越 多 的 移动 终端 设备 拥有 更 为 专业 的 网 络 性 能 。 用 户 

经 常 使 用 移动 设备 上 网 聊天 、 浏 览 页 面 及 传送 文件 等 ， 也 就 是 可 以 在 移动 终端 设备 上 实现 数 
据 上 传 、 数 据 下 载 及 数据 浏览 等 功能 。 本 章 将 结合 具体 的 案例 介绍 小 程序 与 网 络 进行 数据 交 
换 的 技术 和 实现 方法 。 通 过 本 章 的 学 习 ， 读 者 可 以 掌握 微 信 小 程序 的 网 络 应 用 开发 技术 和 云 
开发 技术 。 
GS398D 

了 解 小 程序 访问 网 络 的 原理 ; 

掌握 小 程序 访问 控制 第 三 方 云 数据 库 平 台 ( Bmob ) 的 机 制 和 方法 ; 

掌握 小 程序 云 开发 提供 的 云 函 数 、 云 数据 库 和 云 文件 存储 能 力 的 后 端 云 服务 工作 机 

制 和 开发 技术 ; 

掌握 小 程序 wx.request( )、wx.uploadFile( ) 和 wx.downloadFile( ) 等 网 络 API 的 使 用 

方法 和 应 用 场景 。 


程序 既 能 够 读 取 服 务 器 端 数据 ， 也 可 以 向 服务 器 端 写 入 数据 。 Se 
8.1.1 网 络 API a 


进行 小 程序 应 用 开发 时 ， 可 以 通过 微 信 小 程序 开发 框架 提供 的 API 与 服务 器 进行 数据 交 
互 。 与 服务 器 进行 数据 交互 ， 小 程序 都 需要 事先 设置 一 个 通信 域名 ， 小 程序 只 能 跟 指定 域名 
的 服务 器 进行 网 络 通信 。 具体 包括 支持 HTTPS 协议 的 请 求 (request)、 上 传 文件 (uploadFile)、 
下 载 文件 (downloadFile) 和 支持 wss 协议 的 WebSocket 通信 (connectSocket)。 


8.1.2 ”小 程序 云 开 发 


小 程序 云 开发 可 以 帮助 开发 者 快速 构建 微 信 小 程序 的 后 端 服务 ， 它 为 开发 者 提供 了 “ 云 
函数 ”“ 云 数据 库 ”“ 云 文件 存储 ”和 “ 云 调 用 ”的 能 力 。 

中 云 函 数 : 在 云端 运行 的 代码 ， 微 信 私有 协议 天 然 鉴 权 ， 开 发 者 只 需 编写 自身 业务 由 
辑 代码 。 

@ 云 数 据 库 : 一 个 既 可 在 小 程序 前 端 操作 ， 也 能 在 云 函数 中 读 写 的 JSON 数据 库 。 
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@ 云 文件 存储 : 在 小 程序 前 端 直接 上 传 /下 载 云端 文件 ， 可 以 在 云 开 发 控制 台 可 视 化 管理 。 
图 云 调 用 : 基于 云 函数 免 鉴 权 使 用 小 程序 开放 接口 的 能 力 ， 包 括 服务 端 调用 、 获 取 开 
放 数 据 等 能 力 。 


8.1.3 ”第 三 方 云 平台 


开发 一 个 具有 网 络 功能 的 应 用 , 不 仅 需 要 购买 /租赁 服务 器 , 还 需要 掌握 一 门 服务 器 开发 
语言 (如 Java/.NET/PHP 等 )， 这 对 大 多 数 个 人 移动 应 用 开发 者 来 说 都 不 是 一 件 容易 的 事 。 而 
目前 业内 用 的 更 多 的 还 是 直接 租用 云 服务 器 ， 比 如 百度 云 、 阿 里 云 等 ， 用 来 部 署 自己 的 服务 
系统 ， 以 节约 购买 硬件 服务 器 、 带 宽 和 维护 的 费用 。 一 般 由 第 三 方 平台 提供 的 这 种 云 服务 


只 需要 下 载 对 应 版 本 的 SDK， 并 将 其 嵌入 开发 者 的 移动 应 用 程序 中 ， 然 后 按照 服务 平台 提供 
的 API 就 可 以 与 该 平台 进行 网 络 通信 。 本 章 以 广州 市 比 目 网 络 科技 有 限 公 司 推出 的 一 个 全 方 
位 一 体 化 的 后 端 服务 平台 Bmob 为 例 ， 结 合 微 信 小 程序 开发 框架 提供 的 相关 技术 ， 实 现 对 云 
端 数据 库 的 增 、 删 、 改 、 查 等 操作 。 


实验 室 是 人 才 综 合 实践 能 力 要 素 培养 的 重要 载体 ， 而 实验 室 主 要 面向 的 就 是 教师 和 学 生 ， 
所 以 实验 室 的 安全 教育 就 显得 尤为 重要 。 只 有 经 过 专业 的 实验 室 安全 知识 学 习 、 通 过 专门 的 
实验 室 安 全 知识 考核 ， 教 师 和 学 生 才 能 进入 实验 室 。 这 种 实验 室 安全 知识 学 习 和 考核 平台 都 
需要 大 量 的 数据 题库、 学 生 信 息 、 考 试 成 绩 等 ) 支撑 ， 微 信 小 程序 框架 提供 的 本 地 缓存 和 
文件 存储 虽然 都 可 以 存储 信息 ， 但 它们 一 方面 不 能 满足 存储 大 数据 量 的 需要 ， 男 一 方面 对 数 
据 操作 的 灵活 度 不 够 。 本 节 以 开发 设计 一 个 实验 室 安全 知识 学 习 平 台 为 例 ， 介 绍 微 信 小 程序 
访问 控制 第 三 方 云 数据 库 平 台 (Bmob) 的 方法 。 HO | 


8.2.1 ”预备 知识 


Bmob 简介 

Bmob 是 广州 市 比 目 网 络 科技 有 限 公司 推出 的 一 个 全 方位 一 体 化 的 后 端 服 8211 
务 平台 ， 它 提供 实时 数据 与 文件 存储 、“ 云 与 端 ”的 数据 连通 等 可 靠 的 Serverless 云 服务 。 该 
平台 可 以 轻松 搭建 应 用 数据 库 ， 并 提供 可 视 化 的 云端 数据 表 设计 界面 ， 能 存储 String (字符 
串 )，Number 数值， 包括 整数 和 浮 点 数 )，Boolean (布尔 值 )，Date (日 期 )，File (文件 )， 
Geopoint (地理 位 置 )，Array (数组 )，Object (对象) 等 多 种 不 同类 型 的 数据 。 

通常 ， 开 发 一 个 具有 网 络 功能 的 应 用 不 仅 需要 购买 /租赁 服务 器 , 还 需要 掌握 一 门 服务 器 
开发 语言 (如 Java/.net/php 等 )， 对 于 大 多 数 个 人 移动 应 用 开发 者 来 说 都 不 是 一 件 容易 的 事 。 
而 在 Bmob 后 端 服务 云 平台 上 ， 开 发 者 只 要 注册 成 功 一 个 账号 后 ， 就 可 以 创建 多 个 云端 数据 
库 ， 下 载 对 应 版 本 的 SDK 并 将 其 嵌入 开发 者 的 移动 应 用 程序 中 ， 就 可 以 对 云端 数据 库 进行 
类 似 于 本 地 数据 库 的 增删 改 查 等 操作 。 

注册 与 登录 Bmob 

(1) 注册 Bmob 账号 。 

在 PC 端 浏 览 器 打开 https://www.bmob.cn/register 网 站 ， 通 过 微 信 “ 扫 一 扫 ” 网 站 界面 显 
示 的 二 维 码 ， 在 微 信 中 关注 Bmob 后 端 云 服务 平台 ，PC 端 显 示 图 8.1 所 示 界 面 。 单 击 “ 注 册 
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新 账号 ”按钮 ， 弹 出 图 8.2 所 示 界 面 ， 然 后 在 “邮箱 ” 栏 输入 可 用 邮箱 作为 用 户 名 ， 在 “ 密 
码 ” 栏 输入 Bmob 账号 的 登录 密码 ， 单 击 “ 注 册 并 绑 定 微 信 ” 按 钮 即 可 。 


欢迎 您 ， 微 信用 户 : 倪 泡 泡 


这 是 您 第 一 次 访问 Bmob 后 端 云 ， 请 补 全 个 人 信息 


您 是 通过 什么 途径 了 解 到 Bmob 的 了 


注册 并 绑 定 微 信 


图 8.1 注册 新 账号 图 8.2 ”注册 并 绑 定 微 信 
(2) 登录 Bmob 云 服务 平台 。 
在 PC 端 浏览 器 打开 https:/www.bmob.cn/login 网 站 ， 通 过 微 信 “ 扫 一 扫 ” 登 录 Bmob 云 
平台 ， 或 在 弹出 的 界面 上 输入 注册 账号 时 输入 的 “邮箱 ”和 “密码 ” PC 端 弹出 图 8.3 所 示 
的 Bmob 云 服 务 管理 平台 界面 。 


€ CG | @ 安全 | https://www.bmob.cn/app/list 


您 还 没 创建 应 用 ,可 到 源码 交易 市 场 获得 整套 应 用 运行 方案 。 去 坦 看 。 


8.3 ”Bmob 云 服务 管理 平台 


创建 应 用 

单 击 图 8.3 所 示 界面 左上 角 的 “创建 应 用 ”按钮 ， 弹 出 图 8.4 所 示 的 “创建 应 用 ”对 话 
框 ， 在 对 话 框 中 输入 应 用 程序 的 名 称 (本 项 目 为 “实验 室 安全 学 习 平 台 ”)， 选 择 合适 的 应 用 
类 型 (本 项 目 为 “小 程序 ”)， 选 择 服务 类 型 (本 项 目 为 “开发 版 ”)， 单 击 “ 创 建 应 用 ”按钮 
后 ， 弹 出 图 8.5 所 示 界 面 。 如 果 开 发 者 是 第 一 次 进入 Bmob 云 服务 管理 平台 ， 还 需要 根据 提 


村 汪 。 微 信 小 程序 案例 开发 “区 x 


示 完善 个 人 相关 信息 。 


专业 版 99 /月 


适用 于 产业 项 目 ， 种 子 期 项 目 ， 项 目 运 行 在 公有 集群 


企业 版 1199 /月 
适用 于 刚 开始 商业 的 项 目 ， 项 目 运行 在 高 可 用 服务 集群 ， 更 稳定 快捷 


企业 版 Pro2299 /月 起 
适用 成 就 的 产品 ， 运 行 在 狐 立 集群 ， 具 有 高 隔 高 高 运算 资源 


图 8.4 创建 应 用 对 话 杠 


域名 及 账号 服务 配置 

单 击 图 8.5 界面 所 示 的 “实验 室 安 全 学 习 平台 ”后 ， 弹 出 图 8.6 所 示 的 “实验 室 安全 学 
习 平台 ”管理 后 台 界 面 ， 开 发 者 可 以 在 该 界面 对 “实验 室 安全 学 习 平台 ”应 用 程序 进行 相关 
配置 ; 
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+ 创建 应 用 


实验 室 安全 学 习 平 台 


Bmob 后 WE 


图 8.5 ”Bmob 云 服务 管理 平台 〈 实 验 室 安全 学 习 平台 ) 


(1) 数据 : 管理 云 数 据 库 通过 该 模块 可 实现 数据 库 表 结 构 的 创建 及 对 表 内 容 的 增删 改 查 
等 操作 ; 

(2) 云 函 数 : 根据 需要 开发 解决 复杂 问题 的 业务 逻辑 代码 ; 

(3) 素材 : 上 传 应 用 程序 需要 的 相关 素材 文件 〈 不 超过 50MB); 

(4) 收益 : 查看 应 用 程序 的 收益 信息 ; 

(5) 短信 : 查看 、 发 送 短信 信息 ; 

(6) 推送 : 向 IOS、Android、Windows Phone 等 平台 的 应 用 程序 推送 信息 ; 

(7) 分 析 : 查看 当前 应 用 程序 的 API 统计 数据 ; 

(8) 设置 : 进行 应 用 程序 的 密 钥 查询 ， 应 用 程序 相关 信息 的 配置 (小 程序 服务 器 域名 配 
置 、 小 程序 账号 服务 配置 ) 等 。 

单 击 图 8.6 所 示 界 面 左 侧 的 “设置 ”一 “应 用 配置 ”按钮 ， 弹 出 图 8.7 所 示 的 小 程序 配 


置 界面 。 在 该 界面 可 以 实现 : 


所 CO https://www.bmob.cn/app/config/2 


实验 本 安全 学 习 于 台 ~ 


迁 第 8 章 网 络 应 用 与 云 开发 医治 


AndroidiiOS 配 置 


ApplD ,小 程序 ID , 填写 后 


AppSecret ,小 程序 窗 钥 


MchID ,商户 号 


过 Bmob 服 务 苇 获 取 该 值 


后 可 和 通过 Bmob 服 务 谋 获 取 该 值 


小 程序 开发 接 入 微 信和 支付 需 填 写 此 项 


Key , 商户 支付 密 诅 ， 小 程序 开发 接 入 微 信和 支付 于 : 


党 信人 小 程序 服务 器 域名 配置 


request 合 法 域名 
邮件 设置 
基础 设置 


国 队 管理 
socket 合 法 域名 


uploadFile 合 法 域名 


apibmobcloud com 


wss.bmobcloud.com( 先 填 ) 


wss.bmobcloud.com( 选 填 ) 


apibmobcloud com 


开局 


8.6 ”实验 室 安全 学 习 平台 管理 界面 


(1) 获得 微 信 小 程序 服务 器 域名 配置 需要 的 request、socket、uploadFile 等 域名 。 登 录 微 
信 公 众 平台 (小 程序 ) 管理 界面 ， 单 击 “ 开 发 ”一 “开发 设置 ”按钮 ， 弹 出 图 8.8 所 示 的 “ 配 
置 服务 器 信息 ”对 话 框 ， 在 对 应 位 置 输入 图 8.7 所 示 的 对 应 域名 信息 。 


小 程序 配置 AndroidiiOS 配 置 


ApplD ,小 程序 ID 

AppSecret 

MchID 小 程序 开 : 

Key ,商户 支付 密 钥 ， 小 程序 : 
微 信 小 程序 服务 器 域名 配置 


request 合 法 域名 apLbmobcloud com 


wss.bmobcloud.com( 先 十 ) 


Socket 合 法 域名 Wss.bmobcloud.com( 迁 填 ) 


uploadFile 合 法 域名 : apibmobcloud com 


开启 文件 独立 域名 开局 


徽 信 小 笃 序 帐号 服务 配置 
小 柑 序 包 祭 
ApplD : 。 委 尖 未 授权 小 程序 立 吕 返 公 ( 游戏 括 公 请 点 去 


AppSecret 


图 8.7 


小 程序 配置 界面 


本 1 微 信 小 程序 案例 开发 “ 春 x 


(2) 配置 微 信 小 程序 账号 服务 信息 。 单 击 图 8.7 所 示 的 “立即 授权 ”， 打开“ 微 信 公 众 平 
台 账 号 授权 ”界面 ， 用 移动 端 设备 扫描 二 维 码 后 ， 在 移动 端 设备 上 选择 要 授权 的 微 信 小 程序 
(由 微 信 公 众 平台 创建 成 功 的 微 信 小 程序 )。 授 权 成 功 后 ， 在 图 8.7 所 示 界 面 的 小 程序 名 称 、 
AppID 对 应 位 置 显示 授权 的 微 信 小 程序 的 对 应 信息 ; 然后 登录 微 信 公 众 平台 小 程序 ) 管理 
界面 ， 在 开发 设置 窗口 生成 该 授权 微 信 小 程序 的 AppSecret， 并 将 生成 的 AppSecret 填写 在 
图 8.7 所 示 界 面 的 AppSecret 栏 。 


https://| 


wssy// 
https:// 


https// 


图 8.8 小 程序 配置 服务 器 信息 对 话 杠 

管理 云 数据 库 

(1) 添加 表 。 

单 击 图 8.6 所 示 界 面 左 侧 的 “数据 ”按钮 ， 弹 出 图 8.9 (a) 所 示 的 “ 云 数 
据 库 ” 管 理 平台 窗口 ， 单 击 该 窗口 的 “添加 表 ” 按 钮 ， 弹 出 图 89 (b) 所 示 的 
“创建 表 ” 对话 框 ， 在 该 对 话 框 中 对 应 位 置 输入 表 名 称 、 表 注释 内 容 ， 单 击 “ 创 加 证 二 利和 
建 表 ”按钮 后 即 可 创建 指定 名 称 的 数据 表 。 Pe 


€ > © @ bmobcn/app/browser/239557 


创建 表 
泰和 名 称 : 自 定义 ~ 


束 名 称 只 能 20 以 内 字母 、 数 字 、 下 划 线 ,必须 以 字母 开关 


图 8.9 “创建 表 ” 对 话 框 


(2) 创建 列 。 

在 “ 云 数据 库 ” 管 理 平台 窗口 左 侧 选择 要 创建 列 〈 即 表 字 段 ) 的 表 名 ， 在 右 侧 单 击 “ 添 加 
列 ” 按 钮 ， 弹 出 图 8.10 所 示 的 “创建 列 ” 对 话 框 ， 在 对 话 框 的 对 应 位 置 输入 列 名 称 〈 字 段 名 )、 
列 类 型 (字段 类 型 等 信息 。 如 果 使 用 “导入 数据 ”的 方法 向 表 中 导入 数据 ， 可 以 不 需要 此 步 。 

(3) 导入 数据 。 

在 “ 云 数据 库 ” 管 理 平台 窗口 左 侧 选 择 要 导入 数据 的 表 名 ， 在 右 侧 的 “更 多 ” 列 中 选择 
“导入 数据 ”命令 ， 弹 出 图 8.11 所 示 的 “导入 数据 ”对 话 框 。 单 击 “ 浏 览 文件 ”按钮 ， 选 择 
“CSV” 或 “JSON” 格 式 的 文件 (文件 内 容 编 码 必须 为 “UTF-8 无 BOM 格式 编码 ”格式 )。 
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图 8.10 “创建 列 ” 对 话 框 


浏览 文件 
:CSV 和 JSON 文 件 需 'UTF-8 无 BOM 格 式 病 码 ”， 每 次 可 导入 一 个 CSV 或 JSON 文 
件 . 


的 JSON 和 格式 有 涯 特殊， 请 产 僻 参 腿 模 板 坟 六 写 ， 不 支持 导入 空 的 数据 


8.11 “导入 数据 ”对 话 框 


回 微 信 小 程序 操作 云 数据 库 
下 面 以 图 8.12 所 示 的 校园 通知 实现 为 例 介绍 微 信人 小 程序 操作 Bmob 云 数 
据 库 的 方法 。 


soe Wechats 1 


发 布 搜索 修改 ”删除 重 置 


放假 通知 Admin 
关于 2019 年 上 报 数据 的 通知 。 Admin 
关于 上 报 数 据 的 通知 Admin 
开会 Admin 


图 8.12 ”校园 通知 页 面 效 果 


微 信 小 程序 案例 开发 “ 苞 f 


(1) 添加 表 。 

打开 Bmob 云 服务 平台 的 “实验 室 安全 学 习 平台 ”应 用 程序 ， 单 击 图 8.6 所 示 界 面 左 侧 
的 “数据 ”按钮 ， 弹 出 “ 云 数 据 库 ”管理 平台 窗口 ， 单 击 该 窗口 右 侧 的 “添加 表 ” 按 钮 ， 弹 
出 图 8.13 所 示 的 创建 表 对 话 框 ， 在 表 名 称 栏 输入 “notice”、 表 注释 栏 输入 “校园 通知 ”。 


be notice 


素 名 称 只 能 20 以 内 字母、 数字 、 下 区 线 ,必须 以 字母 开头 


校园 通知 


图 8.13 创建 notice 表 


在 “ 云 数据 库 ”管理 平台 窗口 左 侧 选择 要 创建 列 〈 即 表 字 段 ) 的 表 名 ， 在 右 侧 单 击 “ 添 
加 列 ” 按 钮 ， 弹 出 图 8.10 所 示 的 “创建 列 ” 对 话 框 ， 在 对 话 框 的 对 应 位 置 分 别 输入 表 8-1 所 
示 的 列 名 称 〈 字 段 名 )、 列 类 型 〈 字 段 类 型 ) 等 信息 。 


表 8-1 notice 表 结 构 


列 名 称 〈 字 段 名 称 ) 描 述 
noticeid 通知 编号 ， 自 增 
noticetitle 通知 标题 


noticecontent | Sting | 通知 内 容 
noticeauthor [stage | 通知 发 布 者 


noticetime 通知 发 布 时 间 


(2) 页 面 设计 。 

由 图 8.12 可 以 看 出 ， 整 个 校园 通知 页 面 分 两 个 部 分 : 上 半 部 分 用 input 组 件 实现 “通知 
标题 "“ 通 知 内 容 ” 的 输入 ; 下 半 部 分 用 scroll-view 组 件 实现 垂直 滚动 ， 显 示 最 近 发 布 的 30 

@ 页 面 布局 文件 代码 。 


1 <view class="section"> 

2 <input placeholder=" 请 输入 通知 标题 " bindinput='getmsgtitle' name= 
"msgtitle" /> 

3 </view> 

4 <view class="section"> 

5 <textarea placeholder=" 请 输入 通知 内 容 " bindinput='getmsgcontent' name= 
"msgcontent" /> 

6 </view> 

7 <view class="btn-area"> 

8 <button bindtap="'insertmsg'> 发 布 </button> 

9 <button bindtap ="findmsg"> 搜 索 </button> 

10 <button bindtap ="updatemsg"> 修 改 </button> 

11 <button bindtap ="deletemsg"> 删 除 </button> 

12 <button bindtap ="blankmsg"> 重 置 </button> 

13 </view> 

14 <scroll-view scroll-y style="height: 200px;"> 
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5 <block wx:for="1 {msgs}}'> 


16 <view class="msgs-class"> 

17 <view style="'width:80%;color:#1161Al1'>{{item}}</view> 
18 <view>{{index}}</view> 

19 </view> 

20 <view style='height:5rpx;background:#F8F8F8;'></view> 


wl </block> 
22 </scroll-view> 


@ 页 面 样式 文件 代码 。 


.section { 

border: lpx solid #ccc; 
margin: 5px auto; 
width: 90%; 
font-size: 16px; 

ls 

.section input { 
padding-left: Spx; 
} 

10 .btn-area { 

3 width: 90%; 

2 margin: 0 auto; 
23 display: flex; 
a 

15 .btn-area button { 
16 flex: 1; 

Ey max-width: 30%; 
18 font-size: 14px; 
:| ， 

20 .msgs-classt{ 

2 display: flex; 

22 flex-direction: row; 
23 width: 90%; 

24 margin-left: 10px; 


mw~wamwmmwmnb 


(3) 页 面 罗 辑 文件 。 

Q@ 下 载 并 安装 BmobSDK。 

从 Bmob 云 服务 平台 下 载 bmob-min.js 和 underscore.js 文件 , 并 将 其 复制 到 小 程序 项 目的 
utils 文件 夹 ， 校 园 通知 小 程序 目录 结构 如 图 8.14 所 示 。 


v DD pages 


v 思 message 
messagejs 
{}) messagejson 
<> message wml 
wss Message WXSS 
DD utls 
bmobjs 
Underscore js 
appjs 
{) appjson 
wss app.WXsS 


人 project.config json 


图 8.14 ”校园 通知 小 程序 目录 结构 


中 二 微 信 小 程序 案例 开发 “ 辣 x9 


@ 在 小 程序 的 appjs 中 加 入 以 下 两 行 代码 ， 进 行 全 局 初始 化 。 


Var Bmob = require('utils/bmob.js'); 
Bmob.initialize ("Application ID", "REST API Key"); 


上 述 代码 的 Application ID 和 REST API Key 通过 单 击 图 8.6 所 示 界 面 左 侧 的 “设置 ”一 
“应 用 密 钥 ”， 弹 出 图 8.15 所 示 对 话 框 ， 将 该 界面 对 应 位 置 的 内 容 复 制 到 上 述 代码 即 可 。 


， ”Application ID，SDK 初 始 化 必须 用 到 此 密 方 
。 REST API Key , REST API 请 求 中 HTTP 头 部 信息 必须 附带 密 铜 之 一 


。 Secret Key ,是 SDK 安 全 密 洞 ， 不 可 汇 需 ， 在 云 函数 测试 云 函 数 时 需要 用 到 


。 Master Key， 超 级 权限 Key。 应 用 开发 或 调试 的 时 候 可 以 使 用 该 密 钥 进行 各 种 权限 的 援 作 ,此 密 钥 不 可 泄漏 


应 用 密 钥 


Application ID: 


REST API Key 


Secret Key 


Master Key 


图 8.15 校园 通知 小 程序 目录 
@ 在 小 程序 需要 操作 数据 表 的 页 面 逻 辑 文件 添加 以 下 代码 。 


Var Bmob = require('../../utils/bmob.js'); 


@ 初始 化 页 面 数据 。 


data: { 
msgs: [], // 通 知 详细 信息 (标题 、 内 容 、 发 布 时 间 和 发 布 者 ) 
msgtitle: ''， // 存 放 input 组 件 中 输入 的 通知 标题 
msgcontent: '' // 存 放 input 组 件 中 输入 的 通知 内 容 

}, 


MpODP 


@ 获取 通知 标题 事件 。 
从 input 组 件 获取 用 户 输入 的 通知 标题 信息 ， 代 码 如 下 : 


getmsgtitle: function(e) { 
this.setDatal({ 
msgtitle: e.detail.value 
}) 
}, 


MAODNP 


@ 获取 通知 内 容 事 件 。 
从 input 组 件 获取 用 户 输入 的 通知 内 容 信息 ， 代 码 如 下 : 


getmsgcontent: function (e) 
this -setData ({ 
msgcontent: e.detail.value 
}) 
}, 


MRONDP 
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@ 发 布 通知 事件 一 一 向 notice 表 中 添加 记录 。 
将 用 户 输入 的 通知 标题 、 通 知 内 容 、 发 布 时 间 及 发 布 者 〈 本 例 直 接 使 用 
Admin 作为 默认 发 布 者 ) 添加 到 Bmob 云 服务 平台 的 notice 表 中 ， 代 码 如 下 : 


1 insertmsg: function(e) { 8214 
区 Var Notice = Bmob.Object.extend("notice"); 

3 Var notice = new Notice(); 

4 notice.set ("noticetitle", this.data.msgtitle); / /通知 标题 
5 notice.set ("noticecontent", this.data.msgcontent); // 通 知 内 容 
6 notice.set ("noticeauthor", "Admin"); // 发 布 者 
人 notice.set ("noticetime", new Date()); // 发 布 时 间 
8 notice.save(null, { 

9 success: function (result) { 

10 console .1o0g ("通知 发 布 成 功 ，objectId:" + result.id); 

a } 

bp St function (result, error) { 

13 console.1og(' 通 知 发 布 失败 ') ; 

14 

15 1D); 

6, Yr 


上 述 代码 第 2~7 行 用 于 实例 化 notice 对 象 ，notice.set ("字段 名 "、 值 ) 语句 中 的 “字段 
名 ”与 Bmob 云 服务 平台 的 notice 表 的 字段 名 相同 、“ 值 ”为 该 字段 的 值 ， 回 ; ; 回 
notice.save( ) 语 句 用 于 将 实例 化 后 的 notice 对 象 上 传 到 Bmob 云 服 务 平台 的 
notice 表 中 ，success( ) 表 示 上 传 成 功 执行 的 操作 ，error( ) 表 示 上 传 失 败 执行 的 
操作 ， 其 中 第 10 行 的 resultid 返回 当前 添加 记录 成 功 后 的 编号 。 

@ 搜索 通知 事件 一 一 从 notice 表 中 查找 记录 。 

根据 用 户 在 通知 标题 输入 框 中 输入 的 标题 进行 查找 ， 并 将 查找 结果 以 object fnoticetitle， 
noticecontent,noticetime,noticeauthor} 的 数据 结构 形式 保存 到 msgs 数组 中 ， 以 便 将 查询 结果 中 
的 通知 标题 (noticetitle) 和 发 布 者 (noticeauthor) 显示 在 图 8.12 页 面 的 下 部 ， 代 码 如 下 : 


1 findmsg: function () { 

交 this .data.msgs=[] 

3 var that = this 

4 var Notice = Bmob.Object.extend("notice"); 

5 var notice = new Bmob.Query (Notice); 

6 notice.equalTo("noticetitle"，that.data.msgtitle) ;// 根 据 通知 标题 查找 
yi notice.find({ 

8 success: function (results) { 

9 for (var i = 0; i < results.length; i++) { 


10 Var object = results[i]; 

由 Var title = object.get('noticetitle') 
2 Var content = object.get('noticecontent') 
3 Var time = object.get('noticetime') 

14 Var author = object.get ('noticeauthor') 
15 that.data.msgs.push({ 

16 noticetitle:title, / /通知 标题 

bg! noticecontent:content， // 通 知 内 容 

18 noticetime:time, // 发 布 时 间 

19 noticeauthor:author // 发 布 者 

20 }) 

| } 

22 that.setDatal({ 

pa | msgs:that .data.msgs 


24 }) 
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25 }, 

26 error: function (error) { 

2 console.1og (“查询 失败 : “ + error.code + “ “+ error.message); 
28 } 

29 ]) 7 

30 Fe 


上 述 代码 第 4-5 行 表示 从 notice 表 中 查询 获得 所 有 记录 集 ; 第 6 行 表 示 在 notice 记录 集 
中 筛选 出 noticetitle 字段 值 为 用 户 在 input 组 件 中 输入 的 msgtitle (通知 标题 )。 第 7~29 行 表 
示 对 第 选 出 的 notice 记录 集 进 行 处 理 ， 如 果 筛 选 成 功 ， 执 行 success( ) 函 数 ， 否 则 执行 error() 
函数 ;其 中 第 9~21 行 表 示 将 筛选 出 的 notice 记录 集 内 容 分 别 以 object{noticetitle,noticecontent, 
noticetime,noticeauthor} 的 数据 结构 类 型 存 入 msgs 数组 中 ; 其 中 results.length 返回 记录 集 的 长 
度 、results 自 返回 第 i 条 记录 集 内 容 、results[i].get(' 字 段 名 ') 返回 第 i 条 记录 集 的 指定 字段 的 
值 。 关 于 Bmob 云 服 务 平台 提供 的 查询 接口 使 用 方法 ， 读 者 可 以 登录 http://doc.bmob.cn/data/ 
wechat app/develop_doc/# 19 页 面 查看 。 

@ 删除 通知 事件 一 一 从 notice 表 中 删除 记录 。 

根据 用 户 在 通知 标题 输入 框 中 输入 的 标题 进行 删除 ， 并 将 删除 后 的 notice 表 中 数据 以 
object{noticetitle,noticecontent,noticetime,noticeauthor} 的 数据 结构 形式 更 新 到 msgs 数组 中 , 以 
便 将 更 新 结果 中 的 通知 标题 (noticetitle) 和 发 布 者 (noticeauthor) 显示 在 图 8.12 页 面 的 下 部 ， 


代码 如 下 : 

1 deletemsg: function () { 

忆 this.data.msgs = [] 

< var that = this 

4 Var Notice = Bmob.Object.extend("notice"); 

5 var notice = new Bmob.Query (Notice); 

6 notice.equalTo ("noticetitle"，that.data.msgtitle) ;// 根 据 通知 标题 删除 
了 notice.destroyAll ({ /7 删除 满足 查询 条 件 的 记录 
8 success: function (results) { 

9 console .10g ("删除 成 功 ") 

10 }, 

了 error: function (err) { 

12 console.10g ("查询 失败 : " + error.code + " " + error.message); 
13 } 

1); 

15 /* 删 除 完毕 ， 将 表 中 剩余 记录 通过 查询 功能 显示 在 页 面 上 */ 

16 Notice = Bmob.Object.extend ("notice"); 

by notice = new Bmob.Query (Notice); 

18 /* 以 下 代码 与 搜索 通知 功能 模块 第 7~29 行 代码 ， 此 处 略 */ 

2 I 


修改 通知 事件 一 一 更 新 notice 表 中 记录 内 容 。 

根据 用 户 在 通知 标题 输入 框 中 输入 的 标题 修改 对 应 记录 的 通知 内 容 , 并 将 
修改 后 的 notice 表 中 数据 以 object{noticetitle.noticecontent.noticetime, noticeauthor} : 
的 数据 结构 形式 更 新 到 msgs 数组 中 , 以 便 将 更 新 结果 中 的 通知 标题 (noticetitle 回 
和 发 布 者 (noticeauthor) 显示 在 图 8.12 页 面 的 下 部 ， 代 码 如 下 : ee 


1 updatemsg: function() { 

本 this.data.msgs = [] 

< var that = this 

4 Var Notice = Bmob.Object.extend("notice"); 
号 Var notice = new Bmob.Query (Notice); 


迁 D 第 8 章 网 络 应 用 与 云 开发 区 


6 notice-equalTo("noticetitle"，that-data-msgtitle) ; // 根 据 标题 修改 内 容 
学 notice.find({ 

8 success: function(results) { 

9 for (var i = 0; i < results.length; i++) { 

10 Var object = results[i]; 

Bl Var objectId = object.get('objectId') 

ee notice.get (objectId, { 

和 success: function(result) { 

14 result.set('noticecontent', that.data.msgcontent); 

15 result .save(); 

16 }, 

17 error: function(object, error) { 

18 console .10g ("修改 记录 失败 ! " + error.code + " "+ error.message); 
19 } 

20 1); 

2 } 

22 }, 

23 error: function (error) { 

24 console.10g ("修改 记录 失败 ! " + error.code + " " + error.message); 
过 } 

26 DD); 

27 /** 修 改 完毕 ， 将 表 中 记录 显示 在 页 面 上 */ 

28 Notice = Bmob.Object.extend("notice"); 

29 notice = new Bmob.Query (Notice); 

30 /* 以 下 代码 与 搜索 通知 功能 模块 第 7~29 行 代码 ， 此 处 略 */ 

号 Rs 


上 述 代码 第 4-6 行 表示 首先 将 notice 表 中 通知 标题 与 input 输入 框 中 相同 的 记录 筛选 出 
来 ， 然 后 使 用 第 7~26 行 代 码 分 别 查 询 满足 条 件 记录 的 objectid 值 objectid 字段 由 Bmob 云 
服务 器 后 台 为 每 个 数据 表 自 动 添加 的 字段 ， 用 于 存储 每 一 条 记录 的 唯一 编号 )， 最 后 根据 
objectid 值 使 用 第 12~20 行 代 码 更 新 该 记录 指定 字段 的 值 (本 例 为 通知 内 容 字 段 一 一 
Doticecontent ) 。 

@@ 加 载 页 面 事件 。 

页 面 加载 时 , 将 Bmob 云 服务 平台 notice 表 中 最 近 发 布 的 20 条 通知 标题 、 发 布 者 显示 在 
图 8.12 页 面 的 下 部 。 代 码 如 下 : 

于 onLoad: function (options) { 

2 this.data.msgs = [] 
3 var that = this 
4 Var Notice = Bmob.Object.extend("notice"); 
5 Var notice = new Bmob.Query (Notice); 
6 notice.descending('noticetime') 
5 notice.1limit(20) 
8 /* 以 下 代码 与 搜索 通知 功能 模块 第 7~29 行 代码 ， 此 处 略 */ 
3 


上 述 代 码 第 6 行 表示 将 notice 记录 中 的 内 容 按 noticetime 字段 降序 排列 ， 第 7 i 
制 查询 结果 的 数据 为 20 条 记录 。 


8.2.2 ”实验 室 安全 知识 学 习 平台 的 实现 


实验 室 安全 知识 学 习 平台 一 共 分 为 4 个 模块 , 即 消息 公告 模块 学习 模 块 、 
考试 模块 〈 含 考试 登录 页 面 和 考试 页 面 ) 和 回 看 模块 。 消 息 公告 模块 的 功能 是 
显示 学 校 发 布 的 相关 通知 公告 ， 学 习 模块 的 功能 是 根据 学 生 选择 的 题库 类 型 显示 相关 题目 和 
标准 答案 ; 考试 模块 的 功能 是 从 题库 中 随机 抽取 50 道 题 ， 要 求学 生 在 30 分 钟 内 完成 考试 ， 并 


8.2.2.1 
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保存 学 生 的 考试 时 间 、 答 题 结 果 及 考试 成 绩 ; 回 看 模块 的 功能 是 学 生 可 以 根据 考试 结果 查看 本 
人 的 考试 题目 、 标 准 答案 。 

项 目 创建 

根据 实验 室 安 全 知识 学 习 平台 功能 需求 的 介绍 ， 需 要 在 pages 文件 夹 下 创建 5 个 文件 
夹 ， 分 别 用 于 存放 消息 公告 页 面 (message)、 学 习 页 面 (study)、 考 试 登录 页 面 (exam)、 考 
试 页 面 (detail) 和 回 看 页 面 (me)。 

从 Bmob 云 服务 平台 下 载 bmob-minjs 和 underscorejs 文件 , 并 将 其 复制 到 小 程序 项 目的 
utils 文件 夹 。 在 小 程序 的 appjs 中 加 入 下 面 两 行 代码 ， 进 行 全 局 初始 化 : 


var Bmob = require('utils/bmob.js'); 
Bmob.initialize ("Application ID", "REST API Key"); 


tabBar 底部 标签 的 设计 
修改 appjson 全 局 配置 文件 ， 其 详细 代码 如 下 : 


I 中 

2 wes 

3 { 

4 "pagePath": "pages/message/message", 
5 "text": "消息 " 

6 } 

了 

8 "pagePath": "pages/study/study", 
9 "text": "学 习 " 

10 }, 

11 { 

E "pagePath": "pages/exam/exam", 
3 "text": "考试 " 

14 }, 

5 { 

16 "pagePath": "pages/me/me", 

17 PEexEn nn 

18 j 

9 ] 

20 } 


数据 库 设 计 

本 案例 需要 在 Bmob 云 服 务 平台 创建 题库 表 (根据 学 生 所 在 学 院 的 不 同 而 不 同 ，xgti 表 
对 应 信息 工程 学 院 学 生 题库 ),， 学 生 信息 表 (stud), 学 院 信息 表 (dept), 学 生成 绩 表 (score) 
和 消息 通知 表 (notice， 表 结构 如 表 8-1 所 示 )， 学 生 信息 表 结 构 如 表 8-2 所 示 ， 学 院 信息 表 
结构 如 表 8-3 所 示 ， 题 库 表 结构 如 表 8-4 所 示 ， 学 生成 绩 表 结构 如 表 8-5 所 示 。 

表 8-2 学生 信息 表 结 构 表 8-3 学院 信息 表 结 构 

字段 类 型 
String | 编号 
String | 名 称 
String 


含义 


实验 室 主任 
考试 时 间 
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表 8-4 ”题库 表 结构 表 8-5 考试 成 绩 表 结构 表 

字段 名 字段 类 型 含义 字段 名 字段 类 型 含义 
tino Number 编号 scoreid Number 编号 
titype String 题目 类 型 studno String 考生 学 号 
ticontent String 题目 内 容 depno String 考生 所 在 学 院 编号 
tia String 选项 A (判断 题 一 对 ) testtime String 考生 剩余 考试 时 间 
tib String 选项 B (判断 题 一 错 ) testid String 考试 试卷 编号 
tic String 选项 C studanswer String 考生 答案 
tid String 选项 D standanswer | String 标准 答案 
tianswer String 标准 答案 studscore String 考试 成 绩 
titeseno String 试卷 编号 


考试 登录 页 面 的 设计 与 实现 

(1) 考试 登录 界面 设计 。 

实验 室 安全 知识 学 习 平 台 小 程序 运行 后 ， 首 先 打开 图 8.16 所 示 考 试 登录 
界面 。 在 学 号 、 密 码 框 中 输入 登录 信息 ， 单 击 所 在 学 院 输入 框 ， 会 在 页 面 底 
部 弹出 学 院 滚动 选择 器 ， 供 用 户 选择 。 


17:00 


考试 登录 


图 8.16 考试 登录 界面 


Q 页 面 结构 文件 代码 。 


1 <!--pages/exam/exam.wxml--> 

2 <view class="examheader"> 

3 <view class="hdtxt hdtxttop"> 南 京师 范 大 学 泰州 学 院 </view> 

4 <view class="hdtxt"> 实 验 室 安全 知识 考试 系统 </view> 

5 </view> 

6 <form bindsubmit="formSubmit" bindreset="formReset"> 

7 <view class="section"> 

8 <input placeholder=" 请 输入 您 的 学 号 " bindinput='getusername' name= 
"username" /> 

3 </view> 
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10 <view class="section" 

ll <input placeholder=" 请 输入 您 的 密码 " bindinput='getuserpwd' password 
name="paswd" /> 

3 </view> 

3 <view class="section"> 

14 <picker bindchange='"pickDept' mode='selector' range-key="'depname" 
range="'{{depts}}' value="{ {deptid} ss 

15 <input placeholder=" 请 选择 所 在 学 院 " value=' { {depts [deptid] .depname}}' 

name="dept" /> 

16 </picker> 

7 </view> 

18 <view class="btn-area"> 

9 <button formType="submit"> 登 录 </button> 

20 <button formType="reset"> 重 置 </button> 

2 </view> 


22 <view class="notice"> 如 果 没 有 账户 ， 请 与 实验 中 心 ( 室 ) 联系 </view> 
23 </form> 


上 述 代 码 第 6-23 行 用 form 表单 组 件 处 理 用 户 登录 事件 ， 其 中 第 13~17 行 代码 实现 单 击 
请 选择 所 在 学 院 ” 输 入 框 后 在 页 面 底部 弹出 所 有 学 院 滚动 选择 器 。 
@ 页 面 样式 文件 代码 。 


/* pages/exam/exam.wxss */ 
.examheader { 
background-color: #116lal; 
display: flex; 
flex-direction: column; 
align-items: center; 
height: 300rpx; 

.hatxt { 

10 font-size: 45rpx; 

11 color: white; 

yp : 

33 hatrttow 

14 padding-top: 55rpx; 

35 padding-bottom: 10rpx; 
6 

17 .section { 

18 border: lpx solid #ccc; 
19 margin: 10px auto; 

20 width: 80%; 

2 font-size: 16px; 

2 

23 .section input { 

24 padding-left: 15px; 

SA ; 

26 .btn-area { 

| width: 80%; 

28 margin: 0 auto; 

29 display: flex; 

30 

31 .btn-area button { 

3 妆 Flexs Lx 

39 max-width: 40%; 

34 font-size: 14px; 

< 

36 .notice { 

37 width: 100%; 

38 text-align: center; 
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39 margin-top: 10px; 
40 font-size: 14px; 
41 color: dodgerblue; 
42 } 


(2) 考试 登录 页 面 功能 实现 。 

当 显 示 考 试 登录 页 面 时 , 首先 访问 Bmob 云 服务 平台 的 dept 表 (学 院 信 息 rE 
表 ) 和 stud 表 (学 生 信 息 表 )， 然 后 将 dept 表 中 的 学 院 信息 ( 含 学 院 编号 、 学 ”入 
院 名 称 、 考 试 时 间 ) 保存 在 depts 数组 中 ， 以 便 将 学 院 名 称 绑 定 到 页 面 底部 弹 加 
出 的 所 在 学 院 滚动 选择 器 上 ,最 后 根据 页 面 上 输入 的 学 号 、 密 码 和 选择 的 学 院 8.2.23 
判断 信息 ， 如 果 信 息 正 确 ， 就 切换 到 正式 考试 页 面 (detail) 开始 考试 ， 否 则 提示 相关 信息 。 

Q@ 初始 化 数据 。 


Var Bmob = require('../../utils/bmob.js'); 
var studInfo = new Bmob.Query("stud"); // 返 回 学 生 信息 记录 集 
var deptInfo = new Bmob.Query ("dept"); // 返 回 学 院 信息 记录 集合 
Page ({ 
data: { 

depts: [],// 学 院 信息 

deptid: '',// 学 院 编号 下 标 

deptime:0,// 所 在 学 院 考试 时 间 
9 studno: '',// 学 生 输 入 学 号 
10 studpwd: ''// 学 生 输 入 密码 
:al 1 
12 // 页 面 加 载 事件 
13 // 提 交 表 单 事件 
14 // 获 取 输 入 学 号 事件 
15 // 获 取 输 入 密码 事件 
16 // 获 取 选 择 的 所 在 学 院 事件 
7 J 
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@ 页 面 加 载 监听 事件 。 


1 onLoad: function (options) { 

2 var depts = [] 

3 var that = this 

4 deptInfo.1limit(50) // 查 询 

yy deptInfo.find({ 

6 success: function (res) { 

7 for (var i = 0; i < res.length; i++) { 
8 var object = res[i]; 

:| depts.push ({ depno: object.get ('depno'), depname: object.get 
('depname'), deptime:object.get('deptime') }) 

10 } 

和 that.setDatal({ 

la depts: depts 

13 1) 

14 } 

15 1) 

Lh 


上 述 第 4 行 代码 表 示 返 回 最 多 50 条 deptInfo 记录 集 (学 院 信息 ) 的 记录 ; 第 5~15 行 代 
码 表示 将 查询 结果 以 depts{depno,depname,deptime} 格 式 更 新 到 本 页 面 的 depts 数组 变量 中 ， 
以 便 在 页 面 底部 的 滚动 选择 器 上 显示 学 院 名称 。 
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@ 提交 表单 事件 。 


1 formsubmit: function (e) { 

var that = this 

3 studInfo .equalTo("stuno"，this.data.studno) 

4 studInfo.equalTo ("stupwd"，this.data-studpwd) ; 
与 studInfo.find({ 

6 success: function (res) { 

if (res.length > 0) { 

8 var object = res[0]; 


9 Var stuno = object.get('stuno') // 获 得 学 号 

10 var studep = object.get('studep') // 获 得 所 在 学 院 编号 

2 bal var depno = that.data.depts[that.data.deptid] .depno 

这 Var deptime = that.data.depts[that .data.deptid] .deptime 

3 if (studep == depno) {// 如 果 选 择 的 所 在 学 院 与 系统 数据 所 在 院 一 致 

14 wx.SshowModal ({ 

5 title: ' 确 认 '， 

16 content: ' 你 确认 参加 考试 !'， 

7 success(res) { 

18 if (res.confirm) { 

19 console.1og (' 用 户 点 击 确定 ') 

20 wx.redirectTo({ 

21 url: '/pages/detail/detail?stuno=' + stuno + '&studep=' + 
studep + '&deptime=' + deptime, 

2 }) 

23 } else if (res.cancel) { 

24 } 

25 } 

26 }) 

27 } else { 

28 wx.showModal ({ 

29 title: "警告 '， 

30 content: ' 你 选择 的 所 在 学 院 有 误 !'， 

3 }) 

人 3 区 } 

Ee } else { 

34 wx.SshowModal ({ 

35 title: ' 警 告 '， 

36 content : ' 你 的 用 户 名 或 密码 有 误 !'， 

37 }) 

38 } 

39 }, 

40 }) 

Th 


上 述 代码 第 3~4 行 表示 从 studInfo (学 生 信息 记录 集 ) 中 查询 筛选 出 满足 stuno 和 stupwd 
字段 值 内 容 记录 ; 第 5~40 行 代码 表示 对 查询 成 功 的 记录 进行 处 理 ， 其 中 第 9~10 行 代码 表示 
分 别 从 筛选 结果 中 取出 学 生 的 学 号 、 所 在 学 院 编号 ， 第 11~12 行 代码 表示 根据 页 面 底部 所 在 
学 院 滚动 选择 器 上 选择 的 学 院 获得 该 学 院 的 编号 和 该 学 院 学 生 的 考试 时 间 ， 第 13~26 行 代码 
表示 如 果 从 学 生 信息 记录 集中 返回 的 学 院 编号 与 学 生 登录 时 选择 的 学 号 一 致 ， 则 由 第 20~22 
行 代码 将 当前 页 面 切换 到 正式 考试 页 面 detail， 并 且 将 stuno (学 号 )、studep〈 所 在 学 院 ) 和 
deptime 〈 考 试 时 间 ) 等 传递 到 detail 页 面 。 


@ 其 他 事件 。 
1 // 获 取 登 录用 户 输入 的 学 号 
公 getusername: function (e) { 


3 this.setDatal({ 


迁 D 第 8 章 网 络 应 用 与 云 开发 加 到 


4 studno: e.detail.value 
5 ]) 

6 ]} 

这 // 获 取 登 录用 户 输入 的 密码 

8 getuserpwd: function (e) { 
9 this.setData({ 

10 studpwd: e.detail.value 
由 有 和 

12 Fr 


13 // 选 择 所 在 学 院 ， 返 回 所 在 学 院 在 数组 depts 中 的 下 标 depid 
14 pickDept: function (e) { 


15 this.setDatal({ 

16 deptid: e.detail.value 
17 }) 

Br 


正式 考试 页 面 的 设计 与 实现 

(1) 正式 考试 页 面 设计 。 

在 考试 登录 页 面 输入 正确 的 学 号 、 密 码 ， 选 择 所 在 学 院 ， 单 击 “ 登 录 ” 按 
钮 后 进入 正式 考试 界面 ， 如 图 8.17 所 示 。 根 据 图 8.18 界面 设计 图 可 以 看 出 ， 
整个 页 面 设 计 从 上 到 下 分 别 为 时 间 显示 区 、 题 目 显示 区 、 答 案 选 项 选择 区 、 标 
准 答案 显示 区 〈 默 认 隐 藏 不 显示 ， 仅 在 交卷 后 显示 ) 和 底部 按钮 区 (一 旦 学 生 
提交 试卷 后 ,“ 交 卷 ” 按 钮 不 可 用 ， 如 图 8.19 所 示 )。 


时 间 显示 区 
倒计时 : 0: 29: 22 | ] 关上 吕 区 
2 实验 室内 电源 根据 需要 可 自行 拆 装 、 改 
线 。 
A. 对 
@B. 错 答案 选项 选择 区 
标准 答案 显示 区 
底部 按钮 区 
图 8.17 ”正式 考试 页 面 图 8.18 正式 考试 界面 设计 图 


QD 页 面 结 构 文件 代码 。 


1 <view class='detailpage'> 
区 <!-- ”时间 显示 区 --> 
<!-- 题目 显示 区 --> 

4 <!-- 答案 选项 选择 区 --> 

5 <!-- 标准 答案 显示 区 --> 

6 </view> 

7 ”<!-- 底部 按钮 区 --> 


于 光 ” 微 信 小 程序 案例 开发 ” 克 x 


从 图 8.18 可 以 看 出 ， 整 个 页 面 分 为 时 间 显 示 区 、 题 目 显示 区 、 答 案 选 项 选择 区 、 标 准 答 
案 显 示 区 和 底部 按钮 区 ， 各 个 区 域 的 显示 内 容 相 对 独立 ， 下 面 将 按照 图 8.19 的 显示 效果 单独 
介绍 。 


倒计时 : 0: 28: 45 | 
2. 实验 室内 电源 根据 需要 可 自行 拆 装 、 改 
线 。 


A. 对 


@B. 氏 


图 8.19 ”正式 考试 交卷 状态 效果 图 
@ 页 面 样式 文件 代码 。 


page { 
width: 100%; 
height: 100%; 
background: #f8f8f8; 
} 
.detailpage { 
width: 100%; 
display: flex; 
flex-direction: column; 
align-items: center; 
} 


Fowamwmemwn 


0 
1 


@ 时 间 显 示 区 页 面 结构 代码 。 
从 图 8.17 可 以 看 出 ,时间 显示 区 用 text 组 件 显 示 倒 计时 信息 、 用 button 组 件 实现 退出 正 
式 考试 页 面 ， 并 且 水 平 摆布 在 一 行 上 。 


<view class='top-class'> 

加 <text class='time-exam'> 倒 计时 : { {timeinfo}}</text> 

3 <button bindtap='btnquit' class='quit-exam' size='mini' formType= 
"submit"> 退 出 </button> 

4 </view> 


@ 时 间 显 示 区 页 面 样式 代码 。 


.top-class { 
display: flex; 
flex-direction: row; 
width: 98%; 
background: #d4f3eb; 


MRODNP 
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6 align-items: center; 
XEE 

8 .time-exam { 

9 line-height: 80rpx; 
10 margin-top: 5rpx; 
了 width: 75%; 

py height: 80rpx; 

13 text-align: center; 
14 Color: #8alclc; 
se 

16 .quit-exam{ 

3 了 background:#FFAE29; 
18 width: 25%; 

9 color: white; 

OF 


@ 题目 显示 区 页 面 结构 代码 。 

试卷 的 所 有 题目 保存 在 testdetail 数组 中 ， 每 一 个 数组 元 素 的 数据 结构 为 
{tiid,ticontent,tia,tib,tic,tid,tianswer,uanswer,sign}， 即 { 题 号 ,题目 ,选项 A, 选 项 B, 选 项 C, 选 项 D， 
标准 答案 ,考生 答案 ,题目 标记 }。 考 生 正 式 考试 时 ， 如 果 对 某 个 题目 有 疑问 ， 可 以 单 击 图 8.17 
上 的 “标记 ”按钮 ， 即 用 红色 显示 题目 ， 否 则 以 默认 颜色 显示 。 要 实现 这 样 的 效果 ， 可 以 用 
每 个 数组 元 素 的 sign 值 对 题目 显示 样式 进行 条 件 泻 染 。 


Ee <block wx:if='{{!testdetail [tiindex] .sign}}'> 

<text class='content-exam'>{{testdetail [tiindex] .tiid}}.{{testdetail 
[tiindex] .ticontent}}</text> 

局 </block> 

4 <block wx:else> 

本 <text class='content-exam' style='color:red'>{{testdetail[tiindex]. 
tiid}}.{{testdetail [tiindex] .ticontent}}</text> 

6 </block> 


@ 题目 显示 区 页 面 样式 代码 。 


.content-exam { 
text-justify: inter-ideograph; 
margin-top: Srpx; 
width: 98%; 

} 


wa 必 wN 


@ 答案 选项 选择 区 页 面 结构 代码 。 

对 考试 题目 设计 时 ， 仅 有 判断 题 和 单项 选择 题 两 种 题 型 ， 所 以 答案 选项 页 面 结构 设计 全 
部 使 用 单 选 按钮 组 件 来 实现 。 但 是 由 于 判断 题 只 有 两 个 选项 ， 单 项 选择 题 中 有 的 题目 有 三 个 
选项 , 有 的 题目 有 四 个 选项 , 所 以 根据 对 于 C 和 D 两 个 选项 内 容 进 行 条 件 泻 染 , 如 果 testdetail 
数组 元 素 中 的 tic 选项 C) 和 tid (选项 D) 有 内 容 才 会 显示 ， 和 否则 不 显示 。 每 个 选项 下 面 用 
view 组 件 实现 分 隔 线 效 果 。 


1 <view class='option-exam "> 

<radio-group bindchange="selectchange"> 

号 <view class="'option-class'> 

4 <radio value="A" checked="'{{selecta}}'/>A.{{testdetail [tiindex]. 
tia}}</view> 

<view class="'option-line'></view> 

<view class='option-class "> 

Wh <radio value="B" checked='{{selectb}}'/>B.{{testdetail [tiindex]. 

tib}}</view> 


ao 
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18 
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<view class="'option-line '></view> 

<View class='option-class ' wx:if='{{testdetail[tiindex] .tic}}'> 
<radio value="C" checked="{{Sselectc}j}"/DC.{{testdetail[ltiindexl 
四 
<view class="'option-line '></view> 

</view> 

<View class='option-class ' wx:if='{{testdetail[tiindex] .tic}}'> 
<radio value="D" checked="'{{selectd}}'/>D.{{testdetail [tiindex] 
-tid}} 
<view class='option-line'></view> 

</view> 

</radio-group> 
</view> 


@ 答案 选项 选择 区 页 面 样式 代码 。 


-Option-exam { 
text-justify: inter-ideograph; 
margin-top: 10rpx7 
width: 98%; 

} 

.option-class { 
margin-top: 15rpx; 

} 

.option-line { 
margin-top: 15rpx; 
height: Srpx; 
width: 100%; 
background: white; 


@ 答案 显示 区 页 面 结构 代码 
只 有 交卷 成 功 后 才 会 显示 该 区 域内 容 , 所 以 实现 时 使 用 displayanswer 变量 控制 该 区 域 的 


o 


显示 ， 默 认 状 态 下 该 变量 的 值 为 false， 交 卷 成 功 后 ， 该 变量 的 值 为 tue。 


和 


<view style='margin-top:15rpx;color:red;' wx:if='{{displayanswer}}'> 本 题 答 
案 : {{testdetail [tiindex] .tianswer}}</view> 
</View> 


底部 按钮 区 页 面 结构 代码 。 
页 面 底部 的 “标记 ”“ 前 一 题 ”“ 后 一 题 ” 和 “交卷 ”等 4 个 按钮 的 水 平 放置 由 自 定义 的 


样式 类 detailnav 实现 ， 在 每 个 按钮 之 间 增 加 一 条 分 隔 线 ， 由 自 定义 的 样式 类 navline 实现 。 


. 
作 


3 


<view class='detailnav'> 
<button class="button-sign" bindtap="btnsign" formType="submit"> 标 记 
</button> 
<view class='navline'></view> 
<button class="button-ti" bindtap="tobefore" formType="submit"> 前 一 题 
</button> 
<view class="'navline'></view> 
<button class="button-ti" bindtap="tonext" formType="submit"> 后 一 题 
</button> 
<view class="'navline'></view> 
<button class="button-sign" disabled="'{{displayanswer}}' bindtap= 
"btnfinish" formType="submit"> 交 卷 </button> 

</view> 
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他 底部 按钮 区 页 面 样式 代码 。 


.detailnav { 

width: 100%; 

height: 120rpx; 

display: flex; 
flex-direction: row; 
align-items: center; 
float: left; 
background-color: #f6f6f9; 
bottom: 0; 

10 position: fixed; 

= ; 

12 .navline { 

13 width: 5rpx; 

14 height: 100%; 

a background-color: gainsboro; 
16 3} 

17 button { 

18 color: white; 

19 text-align: center; 

20 text-decoration: none; 

21 display: inline-block; 

22 font-size: 30rpx; 

2Z3 border-radius: Orpx; 

24 width: 50%; 

25 height: 100%; 

26 line-height: 120rpx; 

2 

28 .button-ti { 

29 background-color: #3e5f81; 
OU 

31 .button-sign { 

32 background-color: rgb(138, 28, 28); 
3 


oAODEP 


(2) 正式 考试 页 面 功 能 实现 。 

显示 正式 考试 页 面 时 ， 首 先 获取 学 生 的 登录 信息 (学 号 、 所 在 学 院 编号 、 
考试 时 间 )， 并 根据 学 号 查询 Bmob 云 服务 平台 的 score 表 (考试 成 绩 表 ) 判断 
该 学 生 有 没有 超过 规定 考试 次 数 (本 项 目 设 定 2 次 ), 如 果 超 过 规定 考试 次 数 ， 回 ， 
则 直接 给 出 提示 信息 ， 并 返回 考试 界面 ， 如 果 没 有 超过 规定 考试 次 数 ， 则 随机 。 ”8.2.2.5 
抽取 本 次 考试 的 试卷 编号 (本 项 目 设 定 试 卷 编 号 为 1~5)。 然 后 根据 试卷 编号 和 学 院 编 号 ， 从 
试题 库 中 抽取 考试 试题 ， 存 放 到 本 地 数组 testdetail 中 ， 该 数组 元 素 的 数据 为 
{tiid,ticontent,tia,tib,tic,ticd,tianswer,uanswer,sign} 结构 类 型 。 最 后 将 该 数组 元 素 分 别 绑 定 到 页 
面 结构 的 对 应 位 置 显示 。 

中 初始 化 数据 。 


1 Var Bmob = require('../../utils/bmob.js'); 

2 var scoreInfo = new Bmob.Query ("score"); // 返 回 学 生 考试 成 绩 集合 
3 var testInfo = ' 7 

4 Page({ 

5 data: { 

6 Stanos // 学 号 

8 studep: ' // 所 在 学 院 编号 

8 deptime: 0, // 考 试 时间 

9 


mytime: 0, // 倒 计时 器 
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Limelnfor // 倒 计时 信息 


tatlds 7 // 当 前 试卷 编号 
testdetail: [] ， // 当 前 试卷 内 容 
answer: '', // 标 准 答案 

uanswer: '', // 考 生 答 案 

tiindex: 0, // 每 道 题 对 应 的 数组 下 标 


selecta: false， // 选 项 a 的 默认 选中 状态 (未 选中 ) 
selectb: false, 
selectc: false, 
selectd: false, 


displayanswer: false // 是 否 交 卷 (显示 答案 ) 


}, 
// 页 面 加 载 事 件 
// 标 记事 件 
// 前 一 题 事件 
// 后 一 题 事件 
// 选 项 选中 事件 
// 交 卷 事件 
// 退 出 事件 

}) 


@ 页 面 加 载 监听 事件 。 


onLoad: function (options) { 
var that = this 
that.data.testdetail = [] // 将 试卷 内 容 清空 
var m= 5,n=1 
var testid = Math.round(Math.random() * (m - n) + n) // 随 机 抽取 试卷 编号 


var stuno = options.stuno // 学 号 

var studep = options.studep // 所 在 学 院 

var deptime = options .deptime * 60 // 所 在 学 院 考试 时 间 

Var kscount = 0 // 考 试 次 数 
scoreInfo.equalTo ("studno", stuno); // 查 询 指 定 学 号 学 生 的 成 绩 集合 


scoreInfo.find({ 
success: function (res) { 
kscount = res.length // 返 回 指定 学 号 学 生 考 的 次 数 
if (kscount >= 2) { // 从 分 数 score 表 中 判断 是 否 已 经 考 过 两 次 
WwWX.ShowModal ({ 
title: "警告 '， 
content: "你 已 经 超过 了 考试 次 数 ! '， 
}) 
wx.SswitchTab ({ 
url: '/pages/exam/exam', 
}) 
} 
水 
}) 
that .data.mytime = setInterval (function () { 
that .data.deptime—— 
var hour = parseInt (that.data.deptime/3600 % 24); // 获 取 还 剩 多 少 小 时 
var minute = parseInt (that .data.deptime/60 #s 60) ;// 获 取 还 剩 多 少 分 钟 


Var second = that.data.deptime 当 60; // 获 取 还 剩 多 少 秒 
that .data-timeinfo = hour + ": " + minute + ": " + second 
if (that.data.deptime == 0) { 

clearInterval (that .data.mytime) // 停 止 计 时 


Wx.SshowModal ({ 
title: "警告 '， 
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35 content: "考试 时 间 到 ! '， 

36 }) 

Si // 调 用 交卷 事件 

38 } 

3 that .setData({ 

40 deptime: that.data.deptime, 

41 timeinfo: that.data.timeinfo 

42 }) 

43 }, 1000) 

44 var testdbname = 'qtti' // 默 认 其 他 试题 库 

45 switch (studep) { // 根 据 学 生 所 在 学 院 选择 对 应 试题 库 
46 Case "dep012°': 

47 testdbname = "hsti' 

48 break 

49 case "dep011' : 

50 testdbname = "dlti' 

51 break 

S2 Case "qdqep009' : 

SS testdbname = 'xgti" 

54 break 

55 } 

56 /* 根 据 题库 名 、 试 卷 编号 将 试卷 内 容 存 入 本 地 testdetail 中 */ 
57 testInfo = new Bmob.Query (testdbname); // 获 取 试 题库 对 象 


58 testInfo.equalTo("titestno"，testid + ''); // 从 试题 库 中 筛选 对 应 编号 试卷 
59 testInfo.find({ 


60 success: function (res) { // 把 试卷 内 容 放 入 本 地 数组 中 
61 for (var i = 0; i < res.length; i++) { 

62 that .data.testdetail.push({ 

63 tiid: + 1I，// 题 号 

64 ticontent: res[i].get('ticontent')，// 题 目 内 容 
65 tia: res[i].get('tia'), // 选 项 A 
66 tib: res[i].get('tib'), // 选 项 B 
67 tic: res[i].get('tic'), // 选 项 C 
68 tid: res[i].get('tid'), // 选 项 D 
69 tianswer: res[i].get('tianswer'), // 标 准 答 案 
70 uanswer: '', // 考 生 答 案 
71 sign: false // 标 记 
72 }) 

73 } 

74 七 hat .setData({ 

了 5 stuno: stuno, 

76 studep: studep, 

了 deptime: deptime, 

78 testid: testid, 

79 testdetail: that.data.testdetail 

80 }) 

81 } 

82 1 

83 Fx 


上 述 代 码 第 4-5 行 用 于 随机 抽取 本 次 考试 的 试卷 编号 ; 第 6~8 行 用 于 从 考试 登录 页 面 获 
区 登录 考试 的 学 号 、 所 在 学 院 编 号 和 考试 时 间 ; 第 9~24 行 用 于 判断 本 次 登录 考试 有 没有 超 
过 考试 次 数 ， 如 果 超 过 考试 次 数 ， 将 页 面 切 换 到 考试 登录 页 面 。 第 25~43 行 代 回 
码 用 于 实现 一 个 以 考试 时 间 为 初始 值 的 倒计时 器 ， 一 旦 考试 时 间 到 ， 调 用 交卷 
事件 。 第 44~55 行 代码 根据 登录 学 生 所 在 学 院 的 编号 获得 Bmob 云 服 务 平台 访 
问 的 题库 表 名 称 〈 默 认 表 名 为 qti，dep012 对 应 hsti，dep011 对 应 dli，dep009 回 
对 应 xgti)。 第 56~81 行 代码 根据 试题 库 表 名 和 试卷 编号 从 Bmob 云 服务 平台 获 8.2.2.7 
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得 试题 信息 ， 并 保存 到 本 地 题目 数组 testdetail 中 〈 包 含 题 号 、 题 目 内 容 、 选 项 A、 选 项 B、 
选项 C、 选 项 D、 标 准 答案 、 考 生 答案 及 标记 号 )。 
@ 前 一 题 事件 。 


a tobefore: function () { 

2 var index = this.data.tiindex // 当 前 页 面试 题 的 数组 元 素 下 标 
3 index-- // 下 标 减 1 

4 if (index < 0) { // 判 断 是 否 为 第 一 题 
5 WwWX.ShowModal ({ 

6 title: "警告 '， 

yy content: ' 已 到 第 一 题 ! '， 

8 }) 

9 } else { 

10 this.data.selecta = false ， // 答 案 选项 默认 状态 (未 选中 ) 
this.data.selectb = false 

12 this.data.selectc = false 

3 this.data.selectd = false 

14 switch (this.data.testdetail[index] .uanswer) { 
15 case. "A's: 

16 this.data.selecta = true 

ld break 

18 case "B": 

19 this.data.selectb = true 

20 break 

之 case EC 

22 this.data.selectc = true 

3 break 

24 case "D"s 

25 this.data.selectd = true 

26 break 

2 } 

28 this.setData({ 

29 tiindex: index, 

30 selecta: this.data.selecta, 

3 selectb: this.data.selectb, 

号 2 selectc: this.data.selectc, 

33 selectd: this.data.selectd 

34 }) 

35 } 

36 1}, 


上 述 代 码 第 10~13 行 用 于 将 试题 答案 选项 设置 为 未 选中 状态 ; 第 14~27 行 表示 根据 考生 
的 答案 ， 将 对 应 选项 设置 为 选中 状态 。 
@ 后 一 题 事件 。 
后 一 题 事 件 代码 与 前 一 题 事 件 代码 类 似 ， 仅 需要 将 当前 页 面试 题 的 数组 元 素 下 标 加 1， 
如 果 超 过 题目 数 ， 则 给 出 “已 到 最 后 一 题 ! ”提示 信 息 。 限 于 篇 幅 ， 不 再 蒙 述 。 本 案例 的 详细 
代码 ， 读 者 可 以 参阅 代码 包 lesson8_exam 文件 夹 中 的 内 容 。 
@ 标记 事件 。 
btnsign: function () { 
var flag = this.data.testdetail[this.data.tiindex] .sign 
this.data.testdetail[this.data.tiindex] .sign = !flag 
this .setData({ 
testdetail: this.data.testdetail 


1) 
}, 


AanOoODPp 
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@ 交卷 事件 。 回 
交卷 事件 在 学 生 单 击 “ 交 卷 ”按钮 或 考试 时 间 到 都 会 触发 ， 一 旦 触发 会 将 : 
当前 学 生 的 考试 信息 〈 包 含 学 生 学 号 、 考 试 剩 余 时 间 、 所 在 学 院 编号 、 考 试 成 
绩 、 学 生 答 案 、 标 准 答案 和 试卷 编号 等 ) 添加 到 Bmob 云 服务 平台 的 score 回 贡 8 


表 中 。 8.2.2.8 
1 btnfinish: function () { 

G4 var that = this 

:| wzx.ShowModal ({ 

4 title: ' 警 告 '， 

5 content : ' 您 确认 交卷 ? ' 

6 success(res) { 

中 if (res.confirm) { 

8 Var score = 0; 

9 var sinfo = "恭喜 ! 您 已 顺利 通过 考试 ! ，' 

10 for (var i = 0; i < that.data.testdetail.length; i++) 1 

11 Var answer = that.data.testdetail[i] .tianswer 

El Var uanswer = that.data.testdetail[i] .uanswer 

13 that.data.answer = that.data.answer + answer 

14 that.data.uanswer = that.data.uanswer + uanswer 

二 if (answer == uanswer) { 

16 Score— Score +2 

有 } 

18 } 

19 if (score < 90) { 

20 sinfo =' 您 的 本 次 成 绩 为 ，， + score +'! 对 不 起 ， 您 还 没有 过 关 ! ，' 
21 } 

人 wx.showModal ({ 

29 title: ' 提 示 '， 

24 content: sinfo, 

25 }) 

26 that .data.displayanswer = true; // 显 示 答 案 
287 clearInterval (that .data.mytime) // 交 卷 完成 ， 取 消 计 时 
28 Var Score = Bmob.Object.extend("score"); 

29 Var Scoretb = new Score(); 

30 scoretb.set ("testtime", that.data.timeinfo); // 考 试 剩余 时 间 
3L scoretb.set ("depno", that.data.studep); 

3 scoretb.set ("studscore", score); 

33 scoretb.set ("studanswer", that.data.uanswer); 

34 scoretb.set ("standanswer", that.data.answer); 

5 Scoretb .set ("studno", that.data.stuno); 

36 scoretb.set ("testid", that.data.testid + ''); 

生计 Scoretb .save (nul1，{ 

38 Success: function (result) { 


console.1og ("考生 成 绩 创建 成 功 ，objectId:" + result.id); 
}, 
error: function (result, error) { 
console.10g(' 创 建 考生 成 绩 失 败 '，result,， error); 
上 
]) 7 
that .setData({ 
displayanswer: that.data.displayanswer, 
score: score 
}) 
else if (res.cancel) { 


console.1o0g(' 用 户 点 击 取消 ') 


mmmu 必 心心 心心 心心 心心 必 W 
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守门 微 信 小 程序 案例 开发 “ 礁 x 


54 a 


上 述 代 码 第 10~18 行 表 示 将 当前 考试 试卷 的 标准 答案 和 学 生 答案 逐一 比 对 ， 如 果 相 同 ， 
每 题 加 2 分 ， 作 为 最 终 学 生 的 考试 成 绩 。 第 26~27 行将 控制 答案 显示 的 displayanswer 变量 设 
署 为 tue《〈 即 显示 答案 )， 并 取消 倒计时 时 钟 。 第 28~44 行 用 于 将 本 次 考试 的 相关 信息 写 入 
Bmob 云 服 务 平 台 的 score 表 中 。 

@ 选项 选中 事件 。 

selectchange(e) { 
this.data.testdetail [this.data.tiindex] .uanswer = e.detail.value 
this.setData({ 

testdetail: this.data.testdetail 


}) 
}, 


@ 退出 考试 页 面 事件 。 


1 btnquit: function () { 

六 if (!this.data.displayanswer) { 

| WwWX.ShowModal ({ 

4 title: "警告 "， 

content : ' 你 正在 考试 ， 还 要 退出 吗 ?，'， 

6 success: function (res) { 

区 if (res.confirm) { 

8 wx.sSwitchTab ({ 

9 url: '/pages/exam/exam'  // 退 出 考试 ,切换 到 考试 登录 页 面 
10 }) 

3 } 

过 } 

13 }) 

14 } else { // 交 卷 完 成 可 以 直接 退出 考试 

| WwWX.SWitchTab ({ 

16 url: '/pages/exam/exam' // 退 出 考试 ， 切 换 到 考试 登录 页 面 
了 7 }) 

18 } 

LO 


单 击 “退出 ”按钮 后 ， 首 先 判 断 是 否 处 于 正在 考试 状态 (displayanswer 值 为 false)， 如 
果 是 正在 考试 状态 ， 给 出 “警告 ”提示 ， 如 果 确 认 退 出 ， 则 切换 到 考试 登录 页 面 ， 如 果 不 是 
正在 考试 状态 〈 即 已 经 交卷 成 功 )， 则 直接 切换 到 考试 登录 页 面 。 


全 0 8.3 竞赛 打分 系统 的 设计 与 实现 


现在 各 种 各 样 的 比赛 越 来 越 多 , 主办 方 通常 需要 一 个 操作 方便 、 价 格 低廉 、 国 党 
界面 友好 的 打分 系统 快速 给 出 选手 的 成 绩 和 排名 。 本 节 以 开发 设计 一 个 竞赛 打 
分 系统 为 例 ， 介 绍 微 信 小 程序 云 开发 的 步骤 和 方法 。 


8.3.1 预备 知识 83.1.1 


贺 小 程序 云 开发 简介 
小 程序 云 开发 是 腾讯 联合 微 信 团 队 为 开发 者 提供 的 包含 云 函数 、 云 数据 库 和 云 文件 存储 
能 力 的 后 端 云 服务 。 它 提供 了 以 下 三 方面 的 能 力 。 
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@ 数据 库 能 力 。 


云 数据 库 是 指 在 服务 器 端 提供 的 数据 库 服务 。 小 程序 云 提 供 的 数据 库 属 于 文档 型 数据 库 ， 


它 与 关系 型 数据 库 不 同 在 于 : 关系 型 数据 库 中 可 以 包含 若干 个 数据 表 ， 每 个 数据 表 由 若干 条 
记录 组 成 ;而 文档 数据 库 保存 的 是 图 8.20 所 示 的 JSON 格式 数据 ， 每 个 JSON 格式 的 数据 文 
档 相当 于 关系 型 数据 库 中 的 一 个 数据 表 。 也 就 是 说 ， 文 档 数 据 库 保 存 的 是 JSON 格式 数据 文 
档 的 集合 。 


”id"XJ1_gt7E7L4wBRr3 


“_openid" 0S78 Eerieldaldesin DO FN 

“msgauthor”admin 

"msgcontent” 今 天 下 午 在 图 书馆 会 议 室 召 开学 生 党 员 会 议 ， 请 准时 参加 ! 
"msgtime" Fri Mar 29 2019 10:14:31 GMT+0800 (中 国标 准时 间 ) 
"msgtitle" 开 会 通知 


图 8.20 JSON 数据 格式 


一 个 云 数据 库 可 以 包含 多 个 JSON 格式 数据 文档 的 集合 〈 相 当 于 关系 型 数据 库 中 的 表 )， 
每 个 集合 可 看 作 一 个 JSON 格式 的 数组 ， 数 组 中 的 每 个 对 象 也 就 是 一 条 记录 ， 关 系 型 数据 库 
和 文档 型 数据 库 的 概念 对 应 关系 如 表 8-6 所 示 。 微 信 小 程序 云 开 发 平台 提供 的 文档 型 数据 库 
是 一 个 具备 完整 增删 改 查 能 力 的 JSON 格式 数据 库 ， 目 前 基础 版 提供 2GB 的 免费 存储 空间 ， 
供用 户 使 用 。 


表 8-6 ”关系 型 数据 库 与 文档 数据 库 的 对 应 关系 


关系 型 数据 库 文档 型 数据 库 
数据 库 (database) 数据 库 (database) 
表 (table) 集合 (collection) 
行 (row) 记录 (record/doc) 
列 (column) 字段 (field) 


@ 文件 存储 能 力 。 

微 信 小 程序 云 开 发 平台 为 用 户 提供 一 个 5GB 的 免费 文件 存储 空间 , 并 提供 为 小 程序 远程 
上 传 和 下 载 文件 的 能 力 。 开 发 者 可 以 在 小 程序 端 和 云 函 数 端 通过 相应 的 API 实现 文件 的 上 传 
和 下 载 功 能 。 

@ 云 函 数 能 力 。 

微 信 小 程序 云 开发 平台 的 云 函 数 是 可 以 运行 在 云端 (服务 器 端的 一 段 代码 ， 开 发 者 不 
需要 管理 服务 器 就 可 以 执行 业务 多 辑 ( 云 函数 )。 微 信 小 程序 开发 框架 提供 专门 用 于 云 函 数 调 
用 的 API, 这 样 就 可 以 让 开发 者 在 云端 实现 以 下 内 容 : (1) 部 署 云 函 数 , 实现 多 个 用 户 共享 、 
且 容 易 维 护 的 代码 ; (2) 获取 如 AppID、OpenID 等 敏感 信息 。 

配置 小 程序 支持 云 开发 

配置 小 程序 支持 云 开 发 有 以 下 两 种 方式 : 

(1) 直接 使 用 云 开发 模板 。 即 使 用 微 信 开 发 者 工具 的 云 开 发 模板 创建 的 小 程序 会 直接 支 
持 云 开发 。 

(2) 开发 者 手动 配置 。 即 修改 小 程序 的 相关 配置 信息 ， 让 小 程序 支持 云 开发 。 

直接 云 开发 模板 创建 小 程序 在 后 面 单独 介绍 ， 下 面 介绍 手动 配置 支持 小 程序 云 开发 的 步骤。 
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@ 在 project.configjson 文件 中 添加 cloudfunctionRoot 字段 ， 代 码 如 下 : 


"miniprogramRoot": "miniprogram/", 
"cloudfunctionRoot": "cloudfunctions/™", 
"setting": { 

wurlCheck": true, 

"es6": true, 

"postcss": true, 

"minified": true, 

"newFeature": true 


Fowamwmewn 


Onis 


上 述 代 码 第 2 行 用 于 指定 小 程序 源码 目录 ; 第 3 行 用 于 指定 云 函 数目 录 。 
@ 在 appjson 文件 中 添加 cloud 字段 进行 兼容 性 配置 ， 代 码 如 下 : 


{ 
"pages": [ 
] 


’ 
"window": { 


1 
Cloud trae 


aawmwmwn 


云 开发 能 力 从 基础 库 2.2.3 开始 支持 ， 如 果 要 兼容 支持 2.2.3 以 下 的 版 本 ， 需 要 使 用 上 
述 第 6 行 代码 进行 兼容 性 配置 。 
@ 在 appjs 文件 中 初始 化 云 开 发 能 力 ， 代 码 如 下 : 


App ({ 
onLaunch: function () { 


. 

2 

if (!wzx.cloud) { // 如 果 已 经 进行 了 兼容 性 配置 ， 则 不 需要 此 语句 
4 console.error(' 请 使 用 2.2.3 或 以 上 的 基础 库 以 使 用 云 能 力 ') 
5 } else { 

6 wx.cloud.init({ 

env: 'kyp-b62220a'，// 设 置 云 环 境 

8 traceUser: true // 设 置 用 户 记录 管理 功能 


上 述 第 6~8 行 代 码 用 于 初始 化 小 程序 的 云 开发 能 力 ， 其 中 第 7 行 的 env 用 于 设置 开通 云 
平台 的 云 环境 ， 第 8 行 的 traceUser 用 于 设置 凡是 访问 过 云 项 目的 用 户 ， 都 会 在 “ 云 开 发 控制 
台 ” 的 “用 户 管理 ”下 留 下 访问 记录 信息 。 
建议 读者 阅读 本 部 分 的 内 容 时 ， 首 先 使 用 云 开 发 模板 创建 一 个 支持 云 开发 的 小 程序 ， 再 
结合 projectconfigjson、app.json 和 appjjs 等 文件 内 容 进 行 理 解 。 

使 用 云 开发 模板 创建 小 程序 

(1) 新 建 小 程序 。 

新 建 包含 云 服务 能 力 的 小 程序 时 ， 必 须 输 入 新 建 小 程序 的 AppID 和 选择 后 端 服务 中 的 
“小 程序 - 云 开发 ”选项 。 打 开 微 信 Web 开发 者 工具 ， 单 击 “ 项 目 ” 菜 单 下 的 “新 建 项 目 ” 命 
令 , 弹出 图 8.21 所 示 的 “新 建 云 开发 小 程序 对 话 框 ” 在 对 话 框 中 输入 新 建 小 程序 的 AppID， 
选择 后 端 服务 选项 中 的 “小 程序 - 云 开 发 ” 单 击 “ 新 建 ” 按 钮 ， 打 开 图 8.22 所 示 的 小 程序 项 
目 编辑 窗口 界面 。 此 时 图 8.22 右 侧 的 目录 结构 窗口 包含 cloudfunctions 和 miniprogram 两 个 
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lesson8_ yun 
D:wxappesson8_yun 


VWXC--.~-…-~~-~3a1 


车 无 ApplD 可 注册 
或 使 用 测试 号 


小 程序 


不 使 用 云 服务 


〇 小 程序 云 开发 
数据 库 、 存 储 和 云 画 数 等 完整 的 云 i 尖 拱 
的 API 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 线 和 


JavaScript 


图 8.21 “新 建 云 开发 小 程序 ”对 话 框 


lesson8_yun - 微 信 开 发 奋 工具 v1.02.1902010 本 | 
项 目 文件 蝙 辑 工具 界面 设置 油 信 开发 者 工具 
证 ED EC FE Am 
模拟 器 。 注 名 器。 调试 器 
iPhone5 v 100% ~v WiFi v 模拟 担 作 ~v gq nl 


» By cloudfunctions 
eses WeChals 8-41 99% nm) 请 miniprogram 


云 开 发 QuickStat 。。 ©@ D README md 
{e) prolect config json 


点 击 获取 openid 


目录 结构 窗口 


上 传 图 片 


前 端 操作 数据 库 


快速 新 建 云 函数 


图 8.22 小 程序 项 目 编辑 窗口 


文件 夹 ，miniprogram 文件 夹 中 存放 的 是 与 普通 小 程序 开发 相同 的 业务 代码 和 资源 ， 
cloudfunctions 文件 夹 中 存放 的 是 可 以 上 传 至 小 程序 云端 的 代码 ， 即 云 函数 。 根 据 云 开发 模板 
建立 的 小 程序 会 带 有 一 些 相关 例子 ， 让 开发 者 熟悉 相关 API 的 使 用 方法 。 

(2) 开通 云 开 发 服务 。 

如 果 小 程序 项 目 是 第 一 次 使 用 云 开发 服务 , 单 击 图 8.22 所 示 的 小 程序 项 目 编辑 窗口 工具 
的 “ 云 开发 ”按钮 后 ， 会 打开 图 8.23 所 示 的 开通 云 开发 界面 ， 单 击 界面 上 的 “开通 ”按钮 ， 
打开 图 8.24 所 示 的 “新 建 环境 ”对 话 框 。 

在 “新 建 环境 ”对 话 框 的 对 应 位 置 输入 云 开发 环境 名 称 ， 会 自动 在 环境 人 D 输入 框 中 产 
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生 环境 ID 编号 ， 也 可 以 在 此 输入 框 中 输入 自 定义 的 编号 ， 单 击 “ 确 定 ” 按 钮 即 可 开通 云 开 
发 平台 ， 并 打开 图 8.25 所 示 的 云 开 发 控制 台 界 面 。 


小 程序 - 云 开发 


快速 开发 小 程序 


开通 


图 8.23 ”开通 云 开发 界面 


图 8.24 “新 建 环境 ”对 话 框 


如 果 要 创建 另 一 个 新 环境 , 可 以 单 击 图 8.25 所 示 界 面 上 部 的 “设置 ”按钮 , 然后 在 图 8.25 
所 示 界 面 的 下 部 选择 “创建 新 环境 ”命令 ， 也 打开 图 8.24 所 示 的 “新 建 环境 ”对 话 框 。 

一 个 环境 对 应 一 整套 独立 的 云 开 发 资源 ， 包 括 独 立 的 数据 库 实例 、 存 储 空间 和 云 函 数 配 
置 等 资源 。 各 个 环境 间 相 互 独立 ， 开 通 云 开发 后 ， 初 始 默认 一 个 用 户 可 拥有 最 多 两 个 环境 ， 
每 个 环境 都 有 唯一 的 环境 JP 标识， 初始 创建 的 环境 自动 成 为 默认 环境 。 在 实际 开发 中 ， 建 
议 每 一 个 正式 环境 都 搭配 一 个 测试 环境 ， 所 有 功能 先 在 测试 环境 测试 完毕 后 再 应 用 到 正式 
环境 。 
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云 开发 控制 台 ( 当前 环境 kyp-b6580a) Wi oe 


环境 名 称 kyp 


test 环境 ID:tes -- : 
环境 配额 


kyp 环境 ID: ky|' “0a 


创建 新 环境 


图 8.25 云 开 发 控制 台 窗 口 


云 开发 控制 台 是 管理 云 开 发 资源 的 地 方 ， 控 制 台 提供 以 下 能 力 : 

(1) 运营 分 析 : 查看 云 开发 监控 、 配 额 使 用 量 和 用 户 访问 情况 。 包 括 今日 六 
活跃 用 户 数 、 今 日 API 调用 次 数 、 数 据 库存 储 容量 使 用 情况 、 总 存储 容量 使 用 
情况 、API 调用 监控 及 CDN 流量 使 用 情况 。 

(2) 数据 库 : 管理 数据 库 ， 包 括 增删 改 查 数据 、 索 引 管 理 和 数据 库 访问 权 
限 设 置 等 。 

(3) 存储 管理 ， 查看 和 管理 存储 空间 ， 包 括 上 传 文件 、 删 除 文件 、 查 看 文件 信息 和 对 文 
件 的 权限 设置 等 。 

(4) 云 函 数 : 管理 云 函 数 ， 包 括 新 建 云 函 数 、 删 除 云 函数 及 查看 云 函 数 信息 〈 如 函数 名 
称 、 i 创建 时 间 、 更 新 时 间 等 )。 

曙 操作 数据 库 

微 信 小 程序 云 开 发 提供 的 是 一 种 JSON 数据 库 ， 一 个 数据 库 可 以 有 多 个 集合 ， 一 个 集合 
类 似 于 一 个 JSON 类 型 的 数组 ，JSON 类 型 数组 中 的 每 个 对 象 相当 于 关系 型 数据 库 中 的 一 条 
记录 ， 所 以 在 微 信 小 程序 中 操作 数据 库 就 是 操作 集合 中 的 每 个 对 象 。 每 个 对 象 可 以 包含 多 个 
字段 ， 每 个 字段 存放 的 数据 可 以 是 String (字符 串 )、Number (数字 )、Object (对 象 )、Array 
(数组 )、Bool (布尔 值 )、GeoPoint (地 理 位置 点 )、Date (时 间 )、Null 等 8 种 数据 类 型 。Date 
类 型 表示 时 间 ， 精 确 到 毫秒 ， 在 小 程序 端 可 以 用 JavaScript 内 署 Date 对 象 创 建 ，GeoPoint 类 
型 表示 由 经 纬度 标记 的 地 理 位 置 点 ， 如 果 需 要 对 该 类 型 的 字段 进行 查找 ， 则 一 定 需 要 建立 地 
理 位 置 索 引 ;Null 相当 于 一 个 占 位 符 ， 表 示 存 在 一 个 字段 ， 但 是 该 字段 的 值 为 空 。 

(1) 创建 数据 库 集合 。 

切换 到 图 8.25 云 开发 控制 台 窗 口中 工具 栏 的 “数据 库 ”， 单 击 左 侧 栏 的 “+” 按 钮 ， 打 开 
图 8.26 所 示 的 “创建 集合 ”对 话 框 ， 在 对 话 框 的 集合 名 称 框 中 输入 集合 名 称 。 然 后 可 以 单 击 
“添加 记录 ”或 “导入 ”按钮 ， 向 集合 中 直接 添加 记录 内 容 ， 也 可 以 单 击 “ 导 出 ”按钮 ， 将 集 
合 中 数据 导出 到 本 地 计算 机 保存 。 
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下 于 微 信 小 程序 案例 开发 “ 疙 


十 添 bniD 录 十 导入 


用 。 ee 


集合 名 称 


"msgtitle": “ 


图 8.26 “添加 集合 ”对 话 框 
(2) 设置 数据 库 操作 权限 。 
数据 库 的 操作 权限 分 为 小 程序 端 和 管理 端 ， 管 理 端 包括 云 函 数 端 和 云 开 发 控制 台 。 小 程 
序 端 运行 在 小 程序 中 ， 读 写 数据 库 受 权限 控制 限制 ， 云 函数 端 运行 在 云 函数 上 ， 拥 有 所 有 读 
写 数据 库 的 权限 ， 云 开发 控制 台 的 权限 同 云 函数 端 ， 拥 有 所 有 读 写 数据 库 的 权限 。 
单 击 图 8.26 中 的 “权限 设置 ”命令 ,打开 图 8.27 所 示 的 “权限 设置 ”对 话 框 ， 权 限 按 
照 级 别 从 宽 到 紧 排列 如 下 : 


| ， 云 开发 控制 台 ( 当前 环境 kyp-b6580a ) 


| 各 


云 控制 台 和 服务 庄 始 终 有 所 有 数据 读 写 权限 ， 以 下 配置 仅 对 小 程序 端 发 起 的 请 求 有 效 。 


对 于 集合 中 的 每 条 数据 记录 : 


人 所 有 用 户 可 该 , 仅 创建 者 可 读 写 
用 户 评论 、 用 户 公开 信息 等 
适用 场景 : 用 户 个 人 设 
所 有 用 户 可 读 
适用 场景 


图 8.27 “权限 设置 ”对 话 框 


。 所 有 用 户 可 读 ， 仅 创建 者 可 写 。 即 集合 中 的 数据 只 有 创建 者 可 写 ， 所 有 人 可 读 ， 如 用 
户 公开 信息 、 用 户 评论 等 。 

。 仅 创 建 者 可 读 写 。 即 集合 中 的 数据 只 有 创建 者 可 读 写 ， 其 他 用 户 不 可 读 写 ， 如 个 人 商 
品 订单 、 个 人 信息 设置 等 。 
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。 所 有 用 户 可 读 。 即 集合 中 的 数据 所 有 人 可 读 ， 如 新 闻 信 息 、 商 品 信息 。 

。 所 有 用 户 不 可 读 写 。 即 集合 数据 所 有 用 户 都 不 可 读 写 , 如 后 台 用 于 统计 的 一 些 不 能 

(3) 初始 化 数据 库 。 

在 小 程序 端 使 用 数据 库 API 进行 增删 改 查 等 操作 之 前 , 需要 首先 获取 默认 云 开发 环境 的 
数据 库 引 用 ， 代 码 如 下 : 


1 const db = wx.cloud.database() // 获 取 默 认 云 开发 环境 的 数据 库 引 用 


如 果实 现 某 个 业务 需求 时 ， 要 引用 不 同 云 开发 环境 中 的 数据 库 ， 可 以 在 引用 代码 中 传 入 
一 个 对 象 参数 ， 并 通过 env 字段 指定 要 使 用 的 开发 环境 ， 代 码 格 式 如 下 : 
1 var envName = "test" 
2 const db = wx.cloud.database({ 
3 
4 


env: envName //envName 取 值 不 同 ， 引 用 的 开发 环境 不 同 
}) 


(4) 获取 数据 集合 。 
在 小 程序 端 操作 数据 库 , 实际 是 操作 某 个 数据 库 集合 , 操作 集合 前 需要 首先 获取 数据 集 ， 
代码 如 下 : 


1 const msg = db.collection('msg') //db 云 开发 环境 的 数据 库 引 用 ，msg 为 集合 名 称 


下 面 也 以 本 章 第 二 节 图 8.12 所 示 的 校园 通知 实现 为 例 , 介绍 微 信 小 程序 云 开 发 数据 库 的 
操作 方法 。 图 8.12 所 示 页 面 设计 代码 、 获 取 输 入 通知 标题 的 getmsgtitle( ) 方 法 加 | 
代码 和 获取 输入 通知 内 容 的 getmsgcontent( ) 方 法 代码 可 以 参见 8.2.1 节 的 内 容 ， S 
不 再 袭 述 。 下 面 详细 介绍 用 云 开 发 数据 库 实现 校园 通知 小 程序 的 步骤 。 

(1) 创建 数据 库 集合 。 


本 案例 的 数据 库 集合 名 称 为 msg，msg 的 字段 及 数据 类 型 如 表 8-7 所 示 。 Sa 
8-7 ”msg 数据 库 集合 结构 


出 于 易 用 性 和 安全 性 的 考虑 ， 云 开发 为 云 数据 库 做 了 小 程序 深度 整合 ， 在 小 程序 中 添加 
的 每 个 数据 库 集 合 记录 都 会 带 有 该 记录 创建 者 的 信息 ( 即 小 程序 用 户 的 pd, 并 以 _openid 
字段 保存 在 每 个 相应 用 户 创建 的 记录 中 。 同 时 ， 不 管 在 小 程序 端 还 是 在 管理 端 添加 的 记录 ， 
还 会 自动 生成 唯一 编号 ， 以 _id 字段 保存 在 相应 记录 中 。 

(2) 初始 化 数据 库 。 

在 小 程序 需要 操作 数据 库 msg 集合 的 页 面 逻辑 文件 中 添加 以 下 代码 : 


1 const db = wzx.cloud.database({ 
env: "kyp-b62220a' 


ID 


< | 
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上 述 代 码 第 2 行 的 env 值 (kyp-b62220a) 是 开通 的 云 开发 服务 的 开发 环境 名 称 。 
(3) 初始 化 页 面 数据 。 


data: { 
msgtitle: "", // 通 知 标题 
msgcontent: "7 // 通 知 内 容 


msgauthor: "admin'，// 发 布 者 ， 默 认 admin 

msgtime: new Date () ,// 发 布 时 间 

msgs: [] // 通 知 详细 信息 (标题 、 内 容 、 发 布 时 间 和 发 布 者 ) 
]} 


auwmwmbP 


(4) 发 布 通知 事件 一 一 向 msg 集合 中 添加 记录 。 

将 用 户 输入 的 通知 标题 、 通 知 内 容 、 发 布 时 间 及 发 布 者 〈 本 案例 直接 使 用 admin 作为 默 
认 发 布 者 ) 添加 到 云 开发 数据 库 的 msg 集合 中 ,可 以 通过 调用 Collection.add( ) 方 法 向 msg 集 
合 中 添加 记录 。 

Collection.add( ) 方 法 用 于 在 指定 的 集合 对 象 上 添加 记录 ， 方 法 原型 如 下 : 

function add (options: object): Promise<Result> 
options 参数 详细 说 明 如 表 8-8 所 示 。 
表 8-8 add( ) 方 法 options 参数 说 明 

描述 

data 必 填 项 ， 用 于 指定 新 增 记录 的 字段 及 对 应 数据 
success 插入 成 功 回调 ， 回 调 传 入 的 res 包含 查询 结果 ，res._id 返回 新 增 记录 的 ID 
fail 插入 失败 回调 


complete 调用 结束 回调 
单 击 “ 发 布 ”按钮 ， 向 云 数据 库 的 msg 集合 插入 一 条 记录 的 代码 如 下 : 


2 insertmsg: function () { 

2 var that = this 

和 3 var msg = db.collection('msg') // 获 得 msg 集合 对 象 
4 msq.add ({ 

5 data: { // 指 定 插入 记录 的 字段 和 相应 数据 
6 msgtitle: that.data.msgtitle, 

2 msgcontent: that.data.msgcontent, 

8 msgauthor: "admin' 

9 msgtime: new Date() 

10 }, 

本 success: function (res) { 

了 console.1log (res. id) // 输 出 新 插入 记录 的 id 
丁当 that .data.msqs.push({ 

14 msgtitle: that.data.msgtitle, 

[2 msgcontent: that.data.msgcontent, 

16 msgauthor: "'admin', 

有 msgtime: new Date () 

18 }) 

19 that.setDatal({ 

20 msgs: that.data.msgs 

21 }) 

22 }, 

ds fail: function (err) { 

24 console.1log('fail' + err) 

29 全 

26 ]) 
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上 述 代码 第 13~18 行将 插入 msg 集合 中 的 记录 也 存 入 msgs 数组 中 ， 以 便 在 通知 页 面 上 
更 新 显示 。 到 尖 加 

(5) 搜索 通知 事件 一 一 从 msg 表 中 查找 记录 。 

根据 用 户 在 通知 标题 输入 框 中 输入 的 标题 进行 查找 , 并 将 查找 结果 保存 到 
msgs 数组 中 , 以便 将 查询 结果 中 的 通知 标题 (msgtitle) 和 发 布 者 (msgauthor) 
显示 在 通知 页 面 的 对 应 位 置 ， 可 以 通过 调用 Collection where() 方 法 和 
Collection.get( ) 方 法 从 msg 集合 中 查询 满足 条 件 的 记录 。 

Collection.where( ) 方 法 用 于 指定 筛选 条 件 ， 方 法 原型 如 下 : 

function where(rule: object): Query，rule 参数 用 于 指定 筛选 条 件 。 

Collection .get( ) 方 法 用 于 获取 集合 记录 或 获取 由 where( ) 方 法 指定 筛选 条 件 的 集合 记录 ， 
方法 原型 如 下 : 

function get(options: object): Promise<Result> 
options 参数 详细 说 明 如 表 8-9 所 示 。 


表 8-9 get( ) 方 法 options 参数 说 明 
名 称 描述 
查询 成 功 回调 ， 回 调 传 入 的 res 包含 查询 结果 ，res.data 返回 Array 类 
型 的 查询 结果 数组 ， 数 组 中 的 每 个 元 素 代表 一 条 记录 
fail 查询 失败 回调 
complete 调用 结束 回调 


使 用 get( ) 方 法 获取 集合 记录 时 , 如 果 没 有 指定 limit( ) 方 法 , 则 默认 获取 的 集合 记录 最 多 
为 前 20 条 满足 条 件 的 记录 ;如 果 没 有 指定 skip( ) 方 法 , 则 默认 从 第 0 条 记录 开始 取 集合 记录 ， 
所 以 skip( ) 方 法 经 常用 于 对 满足 条 件 的 记录 进行 分 页 获取 。 由 于 本 案例 中 根据 通知 标题 查询 
的 记录 数 可 能 不 止 20 条 ， 所 以 使 用 limit( ) 方 法 、skip( ) 方 法 和 get( ) 方 法 分 页 获取 集合 记录 
前 ， 还 需要 使 用 count( ) 方 法 对 满足 查询 条 件 的 集合 记录 进行 分 页 。 

Collection.count( ) 方 法 用 于 统计 集合 记录 数 或 统计 由 where( ) 方 法 指定 筛选 条 件 的 集合 
记录 数 ， 但 是 一 个 用 户 只 能 统计 其 有 读 权 限 的 记录 数 ， 方 法 原型 如 下 : 

function count(options: object): Promise<Result> 
options 参数 详细 说 明 如 表 8-10 所 示 。 

表 8-10 count( ) 方 法 options 参数 说 明 
描 述 
统计 成 功 回调 ， 回 调 传 入 的 res 包含 查询 结果 ，res.total 返回 查询 结果 的 


8.3.1.4 


success Function 


名 称 类 型 


success Function 集合 记录 数 
fail | Function ”| 统计 失败 回调 


complete 调用 结束 回调 


Collection.limit( ) 方 法 用 于 指定 查询 结果 集 数 量 上 限 ， 方 法 原型 如 下 : 

function limit(max: number): Collection | Query 
max 参数 用 于 定义 最 大 结果 集 返 回 数量 ， 上 限 为 20。 

Collection.skip( ) 方 法 用 于 指定 查询 返回 结果 时 从 指定 序列 后 的 结果 开始 返回 ， 方 法 原型 
如 下 。 


301 


由 微 信 小 程序 案例 开发 “区 


function skip(offset: number): Collection | Query 
offset 参数 用 于 定义 返回 结果 的 开始 位 置 值 。 
单 击 “ 搜 索 ” 按 钮 ， 从 云 数据 库 的 msg 集合 中 查询 指定 通知 标题 集合 记录 的 代码 如 下 : 


1 findmsg: function () { 

汉 var that = this 

var msq = db.collection('msg') // 获 取 数 据 库 集合 
4 var count = // 记 录 总 数 

5 Var pages = 0 // 页 数 (每 页 20 条 记录 ) 
6 war Easks = (i // 存 放 记 录 内 容 

2 msgq.where({ 

8 msgtitle: this.data.msgtitle 

9 }) .count ({ 

10 success: function (res) { 

nl count = res.total // 返 回 记录 总 数 
12 pages = Math.ceil(count / 20) // 计 算 页 数 
3 for (let i = 0; i < pages; i++) { 

14 msg.wherel({ 

25 msgtitle: that.data.msgtitle 

16 }) .skip(i * 20).1limit(20) .get({ 

于 success: function (res) { 

18 tasks.push.apply (tasks，res.data) // 将 分 页 的 数组 元 素 合并 
19 that.setData({ 

20 msgs: tasks 

21 | 

22 } 

23 }) 

24 } 

25 }, 

26 fail: function (err) { 

27 console.1og (err) 

28 

29 }) 

30  )， 


上 述 代码 第 7~29 行 首先 用 count( ) 方 法 统计 满足 条 件 {msgtitle:this.data.msgtitle} 的 集合 记 
录 数 ， 如 果 统 计 成 功 ， 回 调 success( ) 方 法 ， 并 在 该 方法 中 根据 返回 的 记录 总 数 和 每 页 20 条 
记录 计算 总 页 数 ， 然 后 使 用 第 13~24 行 代码 分 页 取出 每 一 条 记录 ， 并 使 用 数组 合并 的 方法 更 


新 到 msgs 数组 中 ， 以 便 在 页 面 上 显示 。 


上 述 代码 第 7 行 和 第 15 行 的 where 子 句 中 的 {msgtitle:this.data.msgtitle} 表 示 从 msg 集合 
中 查询 msgtitle 字段 值 为 页 面 上 “标题 输入 框 ” 中 输入 内 容 的 记录 。 如 果 需 要 同时 查询 
msgcontent 字段 值 为 "内 容 输入 框 ? 中 输入 内 容 的 记录 ,可 以 用 where({fmsgtitle:this.data.msgtitle， 


msgcontent:this.data.msgcontent}) 代 替 第 7 行 和 第 15 行 的 where 子 句 。 


如 果 要 查询 所 有 集合 记录 ,将 上 述 代码 的 第 7~9 行 和 第 14~16 行 的 where 子 句 删除 即 可 。 


男 外 ， 
如 下 : 


集合 对 象 还 提供 了 一 个 Collection.doc( ) 方 法 ， 用 于 获取 一 个 记录 引用 ， 方 法 原型 


function doc(id: string | number): Document 
id 参数 用 于 指定 要 引用 的 记录 也， 即 集合 中 的 id 字段 值 。 例如， 要 查询 _id 字段 值 为 
XJopbN7E7L4w-Hpm 的 记录 ， 可 以 使 用 如 下 代码 : 


} 
1D) 


On 心 w 


db.collection('msg') .doc('XJopbN7E7L4w-Hpm') .get ({ 
success:function (res){ 


console.log(res.data) 
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上 述 代码 第 3 行 的 res.data 表示 获取 的 记录 引用 。 
(6) 修改 通知 事件 一 一 更 新 msg 表 中 的 记录 内 容 。 
根据 用 户 在 “标题 输入 框 ”中 输入 的 标题 修改 对 应 记录 的 通知 内 容 ， 可 以 通 
过 记录 引用 对 象 document 调用 update( ) 方 法 更 新 msg 集合 中 满足 条 件 的 记录 。 
Documentupdate( ) 方 法 用 于 更 新 一 条 记录 ， 方 法 原型 如 下 : 
function update(options: object): Promise<Result> 
options 参数 详细 说 明 如 表 8-11 所 示 。 


表 8-11 update( ) 方 法 options 参数 说 明 


名 称 ”| 类 型 描述 
data | Object 必 填 项 ， 用 于 指定 更 新 指定 字段 名 及 对 应 数据 
Success | Function 更 新 成 功 回调 ， 回 调 传 入 的 res.stats.updated 返回 更 新 的 记录 数 (0 或 1) 


更 新 失败 回调 
调用 结束 回调 


fail 
complete 


Function 


Function 


单 击 “ 修 改 ” 按 钮 ， 从 云 数 据 库 的 msg 集合 中 查询 指定 通知 标题 集合 记录 后 ， 对 通知 内 
容 进 行 更 新 的 代码 如 下 : 


下 updatemsg: function() { 

var that = this 

3 db.collection('msg') .where({ 

4 msgtitle: this.data.msgtitle 

5 }) .get ({ 

6 success: function (res) // 查 询 成 功 就 更 新 

Wa for (var i = 0; i < res.data.length; i++) { 

8 db.collection('msg') .doc (res.data[i] . id) .update({// 根 据 查询 记 
// 录 的 id 更 新 

9 data: { 

10 msgcontent: that.data.msgcontent 

11 

Ey4 success(res) { 

13 console.1log (res.stats.update) // 返 回 更 新 成 功 的 记录 数 

14 }, 

5 faill(err) { 

16 console.1log (err) 

本 } 

18 }) 

3 } 

20 }, 

21 fail: function(err) { 

这 这 console.log("fail" + err) 

人 3 } 

24 }) 

25 }, 


上 述 代 码 第 3~24 行 首先 用 where( ) 和 get( ) 方 法 查询 出 满足 条 件 的 集合 记录 ， 如 果 查 询 
成 功 ， 回 调 success( ) 方 法 ， 然 后 在 该 方法 中 根据 查询 结果 返回 记录 的 _id 值 调 用 update( ) 方 
法 进行 更 新 。 第 9~11 行 代码 用 来 指定 更 新 记录 的 字段 和 字段 值 。 

(7) 删除 通知 事件 一 一 从 msg 表 中 删除 记录 。 

根据 用 户 在 通知 “标题 输入 框 ” 中 输入 的 标题 删除 对 应 记录 ， 可 以 通过 记录 引用 对 象 
document 调用 remove( ) 方 法 删除 msg 集合 中 满足 条 件 的 记录 。 

Document. remove ( ) 方 法 用 于 删除 一 条 记录 ， 方 法 原型 如 下 : 

function remove(options: object): Promise<Result> 
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options 参数 详细 说 明 如 表 8-12 所 示 。 
表 8-12 remove ( ) 方 法 options 参数 说 明 


删除 成 功 回 调 ， 回 调 传 入 的 res.stats.removed 返回 删除 的 记录 数 (0 或 1) 
更 新 失败 回调 
调用 结束 回调 


success Function 


fail Function 


complete Function 


单 击 “ 删 除 ”按钮 ， 从 云 数 据 库 的 msg 集合 中 查询 指定 通知 标题 集合 记录 后 ， 根 据 相应 
记录 的 _id 删除 记录 的 代码 如 下 : 


1 deletemsg: function() { 

2 var that = this 

3 db.collection('msg') .where({ 

4 msgtitle: this.data.msgtitle 

5 }) .get ({ 

6 success: function (res) 

过 for (var i = 0; i < res.data.length; i++) { 
8 db.collection('msg') .doc(res.data[i]. id) .remove({ 
9 success: function(res) { 

10 console.1og (res.stats.removed) 
二 }, 

12 fail: function(res) { 

3 wx.SshowModal ({ 

14 title: ' 提 示 '， 

15 content: "你 要 删除 内 容 不 存在 ! '， 
16 }) 

17 } 

18 }) 

i } 

20 }, 

pd fail: function(err) { 

22 console.1log ("fail" + err) 

2 } 

24 }) 

25 }, 


上 述 代码 第 3~24 行 首先 用 where( ) 和 get( ) 方 法 查询 出 满足 条 件 的 集合 记录 ， 如 果 查 询 
成 功 ， 回 调 success( ) 方 法 ， 然 后 在 该 方法 中 根据 查询 结果 返回 记录 的 _id 值 调 加 和 回 
用 remove( ) 方 法 删除 记录 。 

云 存 储 2 

小 程序 云 开发 提供 了 一 系列 存储 操作 API, 可 以 将 本 地 资源 上 传 至 云 存 储 加 让 
空间 、 从 云 存 储 空间 下 载 文件 、 删 除 云 存储 空间 文件 和 获取 用 云 文件 ID 的 真 53.16 

(1) wx.cloud.uploadFile(Object objecb: 将 本 地 资源 上 传 至 云 存储 空间 。 如 果 上 传 至 同一 
路 径 ， 则 覆盖 写 入 。object 参数 及 功能 说 明 如 表 8-13 所 示 。 


表 8-13 ”object 参数 及 功能 说 明 


属 性 类 型 功 能 
cloudPath String | 上 传 后 的 文件 资源 在 云 存储 空间 的 路 径 〈 文 件 名 )， 必 填 
filePath String | 待 上 传 文件 资源 的 路 径 ， 必 十 
header Object | HITP 请 求 Header，header 中 不 能 设置 Referer 
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续 表 


et 
Be 


了 写 后 忽略 init 指定 的 环境 


属 性 
config | Object 
success | Object 
fail | Object 
complete 


功 
配置 云 存 储 环境 ，env 使 用 的 环境 人 DD， 
成 功 回调 函数 
失败 回调 函数 
结束 回调 函数 


success(res) 回 调 函 数 的 res.fileID 返回 上 传 至 云 存储 空间 的 访问 路 径 、res.statusCode 返 罗 
服务 器 返回 的 HTTP 状态 码 、res.errMsg 返回 错误 信息 。fail(res) 回 调 函 数 的 res. errCode 返 四 
错误 码 、res.errMsg 返回 信息 (成 功 返 回 uploadFile:ok， 失 败 返回 失败 原因 )。 因 此 从 本 地 选 
择 文件 上 传 至 云 存储 空间 的 代码 如 下 : 


i War PHSrc="Y // 云 存储 空间 的 文件 ID 
wx.chooseImage ({ 

3 success(res) { 

4 wx.showLoading ({ 

5 title: ' 正 在 上 传 中 '， 

6 }) 

T Var filePath = res.tempFilePaths[0] 

8 Var name = parseInt (Math.random() * 1000000) 


9 Var cloudPath = name + filePath.match(/\.[^.]+?$/) [0] 

10 wx.cloud.uploadFile({ 

5 cloudPath: cloudPath, // 存 储 到 云 存 储 空间 的 文件 名 
2 filePath: filePath, // 本 地 资源 文件 路 径 

13 config: { env: 'kyp-b6580a'}， // 配 置 云 存储 环境 

14 success: function (res) { 

5 wx.hideLoading () 

16 pwsrc = res.fileID // 返 回 文 件 在 云 存储 空间 的 路 径 
17 味 

18 }) 

3 } 

20 }) 


上 述 第 8 行 代码 表示 取 一 个 随机 整数 作为 主 文件 名 name、 第 9 行 代码 表 示 将 name 与 用 
正则 表达 式 取得 的 后 级 名 组 合成 存储 到 云 存储 空间 的 文件 名 称 ， 也 可 以 在 文件 名 称 前 添加 上 
传 到 云 存储 空间 的 路 径 。 

(2) wx.cloud.downloadFile(Object objecb: 从 云 存 储 空 间 下 载 文件 。object 参数 及 功能 说 
明 如 表 8-14 所 示 。 


表 8-14 ”object 参数 及 功能 说 明 


属 性 
待 下 载 的 云 存储 空间 文件 ID， 必 填 
配置 云 存储 环境 ，env 使 用 的 环境 ID， 填 写 后 忽略 init 指定 的 环境 
成 功 回调 函数 
失败 回调 函数 
结束 回调 函数 


config 


complete 


success(res) 回 调 函 数 的 res.tempFilePath 返回 临时 文件 路 径 、res.statusCode 返回 服务 器 返 
回 的 HTTP 状态 码 、res.errMsg 返回 信息 (成 功 返 回 downloadFile:ok， 失 败 返回 失败 原因 》 
fail(res) 回调 函数 的 res. erCode 返回 错误 码 、res.errMsg 返回 错误 信息 。 因 此 从 云 存储 空间 


日 
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下 载 文件 到 本 地 的 代码 如 下 : 
var tpath = " // 下 载 到 本 地 的 临时 文件 路 径 


L 

wx.cloud.downloadFile({ 

3 fileID: 'cloud://kyp-b6580a.6b79-kyp-b6580a-1258886906/644270.jpg', 
4 SUCcCeSS: Te5 =>{ 

5 var tpath = res.tempFilePath // 返 回 下 载 到 本 地 的 临时 文件 路 径 

6 ] 

YA) 


(3) wx.cloud.getTempFileURL(Object object): 用 云 文件 ID 换取 真实 链接 ， 可 自 定义 有 
效 期 ， 默 认 一 天 且 最 大 不 超过 一 天 。 一 次 最 多 取 50 个 。object 参数 及 功能 说 明 如 表 8-15 
所 示 。 

表 8-15 ”object 参数 及 功能 说 明 


属 性 功 能 
fileList 要 换取 临时 链接 的 云 文件 ID 列表 ， 必 填 
config | Object | 配置 云 存储 环境 ，env 使 用 的 环境 ID， 填 写 后 忽略 init 指定 的 环境 
Success 成 功 回调 函数 ，success 
fail 失败 回调 函数 
complete 结束 回调 函数 


success(res) 回调 函数 的 res.fileList 返回 文件 列表 数组 ,每 个 数组 元 素 为 Object 类 型 ， 功 
能 说 明 如 表 8-16 所 示 。fail(res) 回调 函数 的 res. errCode 返回 错误 码 、res.errMsg 返回 错误 信 
息 。 因 此 云 文件 ID 换取 临时 链接 的 代码 如 下 。 


表 8-16 object 参数 及 功能 说 明 


属 性 功 能 
fileID 云 文件 ID 列表 
tempFileURL 临时 文件 路 径 
status 状态 码 ，0 表示 成 功 
maxAge 有 效 期 (默认 86400， 即 24 小 时 ) 
errMsg String 返回 信息 (成 功 返回 ok， 失 败 返 回 失败 原因 ) 
2 Wx.cloud.getTempFileURL({ 
2 fileList: ['cloud://kyp-b6580a.6b79-kyp-b6580a-1258886906/644270.jpg', 
'cloud://kyp-b6580a.6b79-kyp-b6580a-1258886906/644271 .jpg'], 
隔 config: { env: 'kyp-b6580a' }， 
a success: res => { 
号 console.log(res.fileList) 
6 }, 
7 }) 


运行 上 述 代码 后 ， 控 制 台 的 输出 结果 如 图 8.28 所 示 。 
(4) wx.cloud.deleteFile (Object object): 从 云 存储 空间 删除 文件 ,一 次 最 多 50 个 。object 
参数 及 功能 说 明 如 表 8-17 所 示 。 
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[Ey Console Sources Network Securty AppData Audits Sensor Storage 


中 © | top YI® | Fiher Default levels Y 


Y(2) [If {-H] 
9: 
errMsg: “ok” 
fileID: "cloud://kyp-b6589a.6b79-kyp-b6588a-1258886986/544279.jpg” 
maxAge: 86409 
status: 9 
tempFileURL: “https://6b79-kyp-b6589a-1258886966.tcb.qcloud.1a/644279.jpg” 
Object 
eID: "cloud://kyp-b6589a.6b79-kyp-b6586a-1258886986/656785.jpg"，tempF 
th: 2 


图 8.28 云 文件 ID 换取 链接 的 控制 台 输出 结果 


表 8-17 object 参数 及 功能 说 明 
功 能 
要 删除 的 云 文件 ID 列表 ， 必 填 
配置 云 存储 环境 ，env 使 用 的 环境 ID， 填 写 后 忽略 init 指定 的 环境 
成 功 回调 函数 ，success 
失败 回调 函数 
结束 回调 函数 


success(res) 回 调 函 数 的 res.fileList 返回 文件 列表 数组 ， 每 个 数组 元 素 为 Object 类 型 ， 功 
能 说 明 如 表 8-18 所 示 。 


表 8-18 object 参数 及 功能 说 明 


属 性 功 能 
fileID 云 文件 ID 列表 
status 状态 码 ，0 表示 成 功 
errMsg 返回 信息 (成功 ，ok， 失 败 :失败 原因 》 


因此 云 文件 了 D 换取 临时 链接 的 代码 如 下 : 


1 wx.cloud.deleteFile({ 

fileList: ['cloud://kyp-b6580a.6b79-kyp-b6580a-1258886906/644270.jpg', 
'cloud://kyp-b6580a.6b79-kyp-b6580a-1258886906/644271 .jpg'], 

EE config: { env: 'kyp-b6580a' }， 

4 success: res => { 

5 console.log (res.fileList) 

6 }, 
了 7 本寺 


8.3.2 ”竞赛 打分 系统 的 实现 


竞赛 打分 系统 一 共 包含 管理 员 页 面 (图 829、 图 830)， 评 委 打分 页 而 症 吾 过 于 
(图 8.31) 和 选手 成 绩 页 面 (图 8.32)， 它 们 均 需 要 以 tabBar 的 形式 展示 。 83.2.1 

管理 员 页 面 用 于 对 赛事 情况 进行 注册 ， 输 入 “评委 人 数 ”后 ， 单 击 “ 添 加 评委 信息 
图 8.29 所 示 页 面 的 下 方 会 显示 图 8.30 所 示 的 评委 信息 登记 表单 ;评委 打分 页 面 用 于 评委 给 先 
手打 分 ， 评 委 可 以 在 页 面 上 分 别 选择 赛事 名 称 、 选 手 姓名 和 评委 姓名 后 ， 输 入 得 分 并 提交 ， 
选手 成 绩 页 面 用 于 展示 各 位 选手 的 成 绩 情况 ， 选 择 赛事 名 称 后 ， 页 面 上 会 依次 显示 每 位 评委 


307 


可 微 信 小 程序 案例 开发 “区 


为 每 位 选手 评判 的 分 值 及 每 位 选手 的 最 终 得 分 。 


seees WeChats 


seeee WeChats 


评委 


赛事 名 称 
请 输入 赛事 名 称 
评委 人 数 


请 输 评委 人 数 添加 评委 信息 


选手 人 数 
请 输入 选手 人 数 添加 选手 信息 
提交 


请 输入 选手 人 数 添加 选手 信息 


请 输入 评委 姓名 
评委 密码 
请 输入 评委 密码 


图 8.29 ”管理 员 页 面 (1) 


e0000 WeChats e0000 WeChats 


输入 选手 


得 分 


提交 


图 8.31 评委 打分 页 面 图 8.32 ”选手 成 绩 页 面 
项 目 创建 


直接 使 用 云 开发 模板 创建 小 程序 项 目 后 ， 依 据 打 分 系统 功能 的 需求 ， 在 pages 文件 夹 下 
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创建 3 个 文件 夹 ， 分 别 存放 管理 员 页 面 (register)、 评 委 打 分 页 面 (home) 和 选手 成 绩 页 面 
(result)。 

tabBar 底部 标签 的 设计 

修改 appjson 全 局 配置 文件 ， 详 细 代 码 如 下 : 


I adearn 

学 WPDOSELELOHR top 

i 

4 "pagePath": "pages/home/home", 

全 "text": "评委 " 

6 1 

"pagePath": "pages/result/result", 
8 "text": "选手 成 绩 " 

9 at 

10 "pagePath": "pages/register/register", 
1 "text": "管理 员 " 

}] 

13 1}, 


开通 云 开发 服务 并 创建 环境 

创建 云 开发 小 程序 后 ， 在 开发 者 工具 的 工具 栏 单 击 “ 云 开发 ”按钮 ， 即 可 打开 云 开发 控 
制 台 , 并 根据 提示 开通 云 开 发 服务 。 然 后 单 击 云 开 发 控制 台 工具 的 “设置 ”按钮 , 创建 环境 ， 
本 项 目 案例 创建 的 环境 名 为 kyp， 环 境 ID 为 kyp-b6580a。 

数据 库 集合 

在 kyp 环境 下 创建 ssxx 数据 库 集 合 ， 该 数据 库 集合 结构 如 表 8-19 所 示 ， 每 一 个 记录 代 
表 一 个 赛事 信息 。 


表 8-19 ”ssxx 数据 库 集合 结构 


赛事 名 称 


列 名 称 


数据 类 型 | 说 明 

评委 姓名 
String 评委 登录 密码 
照片 云 文件 卫 


sspwinfo Object[] 评委 信息 


ssxsinfo Object[] 照片 云 文件 了 D 


各 评委 打分 值 


每 个 赛事 均 包含 赛事 名 称 、 评 委 信息 和 选手 信息 等 内 容 。 由 于 参加 该 项 赛事 的 评委 、 选 
手 的 人 数 不 固 定 ， 包 含 的 信息 并 不 单一 ， 所 以 将 评委 信息 和 选手 信息 的 数据 类 型 设 定 为 
Object[] 数 组 类 型 ,评委 和 选手 的 照片 在 管理 员 进 行 赛事 注册 时 上 传 到 云 存 储 空间 , 然后 将 云 
存储 空间 地 址 保存 到 数据 库 集合 中 。 某 项 赛事 〈 某 条 记录 ) 的 JSON 格式 数据 如 图 8.33 
所 示 。 
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”id": "face13585d3ebee465a9d516483e88f2” 
”openid": "0S7865MY7DefJAqIB4vUzYab096g” 
"ssname": “机 器 人 大 赛 " 
v "sspwinfo”: 
by 
"pwname": "p1” 
"pwpwd": "p1" 
“pusrc": "cloud://kyp-b6588a.6b79-kyp-b6588a-1258886986/6442798.jpg” 
» 1: {"pwuname”:"Pp2","pwpwd":"Pp2","pwusrc":"cloud://kyp-b6588a....} 
» 2: {"pwname":"Pp3","pwupwd":"P3","pwsrc":"cloud://kyp-b6588a....} 
v "ssxsinfo™: 
hak 
» "score”s [45","95","55"] 
“xsentry SR 
“xsname”: “X1” 
“xssrc": "cloud://kyp-b6588a.6b79-kyp-b6588a-1258886986/668651.png” 
be soonesE 7575 75°] Kaentry :NX2 ,Xoneane X2 2 < 小 
2 R” "79" “78”] "ysentry" "Ya" "xsn 


图 8.33 某 赛事 记录 JSON 格式 数据 


管理 员 页 面 的 设计 与 实现 
(1) 管理 员 界 面 设计 。 


从 图 8.30 可 以 看 出 ,整个 页 面 分 成 上 下 两 个 部 分 ， 上 半 部 分 用 于 输入 赛事 
的 基本 情况 赛事 名 称 、 3 人数 和 选手 人 数 )， 下 半 部 分 由 管理 员 单 击 “ 添 
加 评委 信息 ”或 “添加 选手 信息 ”后 展示 “评委 信息 登记 ”或 “选手 信息 登记 ” 
表单 。 

Q@ 页 面 结构 文件 代码 。 


<view class="taskpage"> 

有 <!-- 赛 事情 况 --> 

人 3 <view class='rowline'> 赛 事 名 称 </view> 

4 <input bindblur="snameInput" placeholder=" 请 输入 赛事 名 称 "” /> 
<view class='rowline'> 评委 人 数 </view> 

6 <view style='display:flex'> 

7 <input bindblur="spwInput" placeholder=" 请 输 评委 人 数 " /> 

8 <view style="color:red" bindtap="addPw"> 添 加 评委 信息 </view> 
9 </view> 

10 ”<view class='rowline'> 选 手 人 数 </view> 

ial <view style='display:flex'> 

12 <input bindblur="sxsInput" placeholder=" 请 输入 选手 人 数 " /> 
13 <view style="color:red" bindtap="addXs"> 添 加 选手 信息 </view> 
14 </view> 

5 <button style="width:100%" bindtap="btnsubmit"> 提 交 </button> 
16 ”<!-- 评 委 信 息 --> 


Th <form bindsubmit="formPwSubmit" bindreset="formReset"> 


18 <view style="display:{{isPw}}"> 

19 <view class="title"> 评 委 信息 登记 </view> 

20 <view style="'display:flex'> 

2 <View class="pwinfo"> 

de <view class='Towline'> 评 委 姓名 </view> 

3 <input name="pwname"” placeholder=" 请 输入 评委 姓名 " /> 
24 <view class='rowline'> 评 委 密 码 </view> 


2 <input name="pwpwd” placeholder=" 请 输入 评委 密码 " /> 
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26 </view> 

2 <image src="{{pwsrc}}"></image> 

28 </view> 

29 <view style="display:flex"> 

30 <button bindtap="uppwPic"> 上 传 照片 </putton> 
学 于 <button form-type="submit"> 保 存 信息 </button> 
和 </view> 

33 </view> 


34 </form> 
35 ”<!-- 选 手 信息 表单 与 评委 信息 表单 类 型 ， 此 处 略 --> 


36 </view> 


上 述 第 3~15 行 代码 实现 赛事 情况 登录 界面 , 其 中 第 8 行 代码 绑 定 的 addPw( ) 方 法 用 于 确 
定 评委 信息 登记 界面 的 显示 或 不 显示 ， 评 委 信息 登记 界面 由 第 17~34 行 代码 实现 。 选 手 信 息 
登记 界面 与 评委 信息 登记 界面 类 似 ， 不 再 袭 述 。 读 者 可 以 参阅 代码 包 lesson8_pfxt 文件 夹 中 
的 内 容 。 

@ 页 面 样式 文件 代码 。 


1 page{ 

凤 background: #d5d3b3; 
全 

4 .taskpage { 
5 display: flex; 
6 flex-direction: column; 
ee : 

8 .rowline { 

9 padding-top: 10rpx; 

10 padding-bottom: 10rpx; 
11 color: blue; 

| 

13 input { 

14 border: 2rpx solid gainsboro; 
0 

16 .title { 

二 background: #dbe5b3; 

18 width: 100%; 

19 text-align: center; 

2Z00 3} 

21 button { 

22 background: green; 

2 Color: yellow; 

24 line-height: 30px; 

25 8 

26 .pwinfo { 

2 display: flex; 

28 flex-direction: column; 
29 height: 250rpx; 

30 width: 50%; 

SE 

32 image { 

33 width: 50%; 

34 height: 250rpx; 

35 °F 


(2) 管理 员 页 面 功能 实现 。 

管理 员 在 页 面 上 输入 赛事 名 称 、 评 委 人 数 和 选手 人 数 后 ， 单 击 “ 添 加 评委 
信息 ” 在 页 面 下 方 可 以 输入 评委 姓名 、 评 委 密码 和 上 传 照片 ， 上 传 成 功 后 的 首 妊 沉 罕 
照片 可 以 显示 在 页 面 的 image 组 件 上 ， 单 击 “ 保 存 信息 ”按钮 后 ， 将 当前 输入 83231 
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的 评委 信息 保存 在 pwall 数组 中 。 单 击 “ 添 加 选手 信息 ”， 在 页 面 的 下 方 可 以 输入 选手 姓名 、 


参赛 作品 和 上 传 照片 , 单 击 “ 保 存 信 息 ” 按 钮 后 , 将 当前 输入 的 选手 信息 保存 在 xsall 数组 中 。 


由 于 需要 在 该 页 面 全 局 使 用 云 开 发 环境 kyp-b6580a 及 当前 保存 的 评委 数 i 和 选手 数 j， 所 以 
需要 定义 db、i 和 j 为 页 面 全 局 变量 ， 代 码 如 下 : 


1 
4 
3 
4 
5 


Dawnmwmn 


const db = wzx.cloud.database ({ 
env: 'kyp-b6580a' 
}) 


var i = 0 // 当 前 添加 的 评委 人 数 
var j= 0 // 当 前 添加 的 选手 人 数 初 始 化 数据 
@ 初始 化 数据 。 
data: { 
isPw: 'none', // 控 制 评委 信息 登记 表单 
isXs: 'none', // 控 制 选手 信息 登记 表单 
sname: '', // 赛 事 名 称 
spw: 0， // 评 委 人 数 
Sa // 选 手 人 数 
pwall: (Cl; // 评 委 信息 数组 
xsall: Tl // 选 手 信息 数组 
pwscore: [], // 默 认 评委 打分 均 为 0 
pwsrc: '../../images/code-func-sum.png'，// 默 认 评 委 照 片 
xssrc: '../../images/code-func-sum.png' // 默 认 选手 照片 
Ia 
@ 赛事 名 称 输入 框 失 去 焦点 事件 。 


snameInput: function (e) { 
this.setData({ 
sname: e.detail.value // 赛 事 名 称 
}) 
}, 


评委 人 数 输入 框 失去 焦点 事件 spwInput( ) 和 选手 人 数 输入 框 失 去 焦点 事件 sxsInput( ) 的 


实现 代码 与 上 述 代码 类 似 ， 不 再 袭 述 。 读 者 可 以 参阅 代码 包 lesson8_pfxt 文件 夹 中 的 内 容 。 


@@ 单 击 添加 评委 信息 事件 。 
单 击 “添加 评委 信息 ”后 ， 如 果 当 前 页 面 的 评委 信息 登记 表单 没有 显示 ， 则 显示 ， 并 且 


选手 信息 登记 表单 不 显示 ; 如果 当前 页 面 的 评委 信息 登记 表单 已 显示 ， 则 不 显示 。 


addPw: function () { 
if (this.data.isPw == 'none') { 
this.setData({ 
Lap DOTOCAE 
isXs: "none' 


this.setData({ 
isPw: "none'" 


单 击 添加 选手 信息 事件 addXs( ) 的 实现 代码 与 上 述 代码 类 似 ， 不 再 更 述 。 读 者 可 以 参阅 
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代码 包 lesson8_pfxt 文件 夹 中 的 内 容 。 

@ 上 传 照片 按钮 事件 〈 评 委 信息 登记 表单 )。 

单 击 评委 信息 登记 表单 上 的 “上 传 照片 ”按钮 后 ， 可 以 从 相册 或 相机 选择 照片 上 传 到 云 
存储 空间 。 


1 uppwPic: function (e) { 

区 var that = this 

= wzx.chooseImage ({ 

4 success(res) { 

5 wzx.showLoading ({ // 显 示 上 传 中 提示 信息 

6 title: "上 传 中 

7 }) 

8 var filePath = res.tempFilePaths[0]  ”// 取 出 选择 待 传 文件 路 径 


9 var name = parseInt (Math.random() * 1000000) 

10 Var cloudPath = name + filePath.match(/\.[^.]+2?$/) [0] 

Eh wx.cloud.uploadFile({ 

I cloudPath: cloudPath, // 存 储 到 云 存储 空间 的 文件 名 
13 filePath: filePath, // 本 地 资源 文件 路 径 

14 config: { env: 'kyp-b6580a' }, 

5 success: function (res) { 

16 wx.hideLoading () // 隐 藏 上 传 中 提示 信息 

3 that .setData({ 

18 pwsrc: res.fileID // 返 回 文 件 在 云 存储 空间 的 路 径 
9 }) 

20 上 

21 }) 

2 } 

de }) 
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上 述 第 11~21 行 代码 调用 wx.cloud.uploadFile( ) 方 法 , 将 从 相册 或 相机 选择 的 文件 上 传 到 
云 存储 空间 ， 并 将 存放 在 云 存 储 空间 的 访问 路 径 res.fileID 返回 给 页 面 上 image 组 件 的 src 属 
性 变量 pwsrc， 以 便 在 页 面 上 显示 当前 选择 的 照片 。 选 手 信息 登记 表单 上 的 “上 传 照片 ” 按 
钮 事件 upxsPic( ) 的 实现 与 上 述 代 码 类 似 ， 不 再 资 述 。 读 者 可 以 参阅 代码 包 lesson8_pfxt 文 件 
夹 中 的 内 容 。 

@@ 保存 信息 按钮 事件 (评委 信息 登记 表单 )。 

单 击 评委 信息 登记 表单 上 的 “保存 信息 ”按钮 后 ， 首 先 判断 当前 保存 的 评委 人 数 是 否 已 
经 达到 在 赛事 信息 登记 中 输入 的 人 数 ， 如 果 达 到 ， 则 提示 “评委 人 数 已 满 !”， 和 否则 将 输入 的 
表单 信息 保存 到 评委 信息 数组 pwall 中 。 


1 formPwSubmit: function (e) { 

学 if (i < this.data.spw) { 

3 var pwinfo = e.detail.value // 获 取 表 示 信 息 
4 pwinfo.pwsrc = this.data.pwsrc  ”// 照 片 fileID 
5 this.data.pwall.push (pwinfo) 

6 i++ 

Rh } else { 

8 console.10g(' 评 委 人 数 已 满 ! ' ) 

a } 

TO hs 


上 述 第 4 行 代码 表示 将 当前 评委 的 照片 在 云 存储 空间 多 eID 加 入 评委 信 


息 中 


@ 保存 信息 按钮 事件 (选手 信息 登记 表单 )。 33 人 52 
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单 击 选手 信息 登记 表单 上 的 “保存 信息 ”按钮 后 ， 首 先 判断 当前 保存 的 选手 人 数 是 否 已 
经 达到 在 赛事 信息 登记 中 输入 的 人 数 ， 如 果 达 到 ， 则 提示 “选手 人 数 已 满 !”， 和 否则 将 输入 的 
表单 信息 保存 到 选手 信息 数组 xsall 中 。 


1 formxssubmit: function (e) { 

2 this .setData({ 

3 pwscore: [] // 添 加 选手 时 ， 将 评委 打分 数组 清空 
4 }) 

号 if (j < this.data.sxs) { 

6 var xsinfo = e.detail.value // 选 手表 单 内 容 【 姓 名 ， 参 赛 作品 】 
xsinfo.xssrc = this.data.xssrc // 照 片 fileID 

8 for (var m= 0; m < this.data.spw; m++) { 

9 this.data.pwscore.push (0) 

10 } 

3 xsinfo.score = this.data.pwscore ， // 默 认 评委 打分 为 0 

2 this.data.xsall .push (xsinfo) 

13 j++ 

14 } else { 

15 console.10g (' 选 手 人 数 已 满 ! ') 

16 } 

Ey Ps 


由 于 每 位 选手 信息 中 需要 增加 每 位 评委 的 打分 值 ， 所 以 上 述 第 8~10 行 代码 根据 评委 人 
数 将 评委 打分 的 数组 pwscore 置 为 0， 然后 将 置 为 0 的 pwsocre 数组 加 入 选手 信息 中 。 
@ 自 定义 向 数据 库 集合 ssxx 中 添加 赛事 记录 方法 。 


1 insertssxx: function () { 

他 var that = this 

| Var ssxx = db.collection('ssxx') 

4 SSXX.add({ 

时 data: { 

6 ssname: that.data.sname， // 赛 事 名 称 
7 sspwinfo: that.data.pwall,// 评 委 信息 
8 ssxsinfo: that.data.xsall,// 选 手 信 息 


9 } 

10 success: function (res) { 

3 console.10g(' 赛 事 注册 完成 ! '，res._ iq) 
Be Fe 

| fail: function (err) { 

14 console.1o0g (' 赛 事 注 册 失 败 ! '，err) 

gl xk 

16 }) 

EE }, 


@ 提交 按钮 事件 。 

在 赛事 信息 、 评 委 信 息 、 选 手 信 息 都 输入 完成 后 ， 单 击 管理 员 页 面 的 “提交 ”按钮 ， 就 
可 以 调用 自 定义 向 数据 库 集合 ssxx 中 添加 赛事 记录 的 insertssxx( ) 方 法 , 将 所 有 信息 保存 到 云 
数据 库 集合 中 。 


1 btnsubmit: function (e) { 

2 var sname = this.data.sname 

3 var spw = this.data.spw 

4 var sxs = this.data.sxs 

Var pwall = this.data.pwall.length 

6 Var xsall = this.data.xsall.length 

了 if (sname 一 '' || spw == 0 || sxs == 0 || pwall == 0 || xsall 一 0) { 
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8 wx.showToast ({ 

a title: ' 赛 事 信息 不 完整 !'， 

10 icon: "none" 

了 ]) 

2 return 

:| 

14 this.insertssxx() // 插 入 完整 信息 
3 Fe 


评委 打分 页 面 的 设计 与 实现 

(1) 评委 打分 界面 设计 。 

从 图 8.31 可 以 看 出 ,选择 赛事 名 称 、 选 手 姓名 和 评委 姓名 , 需要 使 用 picker 
和 input 组 件 组 合 实现 , 输入 选手 得 分 使 用 textarea 组 件 , 提交 按钮 使 用 button : 
组 件 。 

页 面 结构 文件 代码 如 下 。 


1 <view class="taskpage"> 


多 <form bindsubmit="formSubmit"> 

3 <picker bindchange='pickSsname' mode='selector' range-key='ssname' 
range='{{ssxxs}}' value='{{ssindex}}'> 

4 <input class="rowline" placeholder=" 单 击 选择 赛事 名 称 " value= '{{ssxxs 
[ssindex] .ssname}}' name="ssname" /> 

5 </picker> 

6 <picker bindchange='pickXsname' mode='selector' range-key='xsname' 
range='{{xsnames}}' value='{{xsindex}}'> 

<input class="rowline" placeholder=" 单 击 选择 选手 姓名 " value= '{ {xsnames 
[xsindex] .xsname}}' name="xsname" /> 

8 </picker> 

El <picker bindchange='pickPwname' mode='selector' range-key='pwname' 
range='{{pwnames}}' value='{{pwindex}}'> 

10 <input class="rowline" placeholder=" 单 击 选择 评委 姓名 " value= '{ {pwnames 
[pwindex] .pwname}}' name="pwname" /> 

3 </picker> 

412 <textarea class="rowline" name ='pwmark' placeholder=" 输 入 选手 得 分 "> 
</textarea> 

13 <button form-type="submit"> 提 交 </button> 


14 </form> 
15 </view> 


页 面 样式 文件 代码 与 管理 员 页 面 样式 文件 代码 一 样 ， 不 再 袭 述 。 读 者 可 以 参阅 代码 包 
lesson8_pfxt 文件 夹 中 的 内 容 。 回 丈 mj 风 国 
(2) 评委 评分 页 面 功 能 实现 。 E 
单 击 赛事 名 称 、 选 手 姓名 输入 框 和 评委 姓名 输入 框 后 , 会 分 别 在 页 面 的 底 外 左 
部 弹出 滚动 选择 器 ， 在 滚动 选择 器 选择 合适 的 选项 ， 并 在 “输入 选手 得 分 ”处 回 沾 ? 
输入 得 分 后 ， 单 击 “ 提 交 ” 按 钮 更 新 当前 赛事 信息 记录 。 由 于 需要 在 该 页 面 全 。 8325 
局 使 用 云 开 发 环境 kyp-b6580a， 所 以 需要 定义 db 为 页 面 全 局 变量 ， 实 现代 码 与 管理 员 页 面 
实现 代码 类 似 。 
中 初始 化 数据 。 
data: { 
ssxxs: []， // 赛 事 信息 


ssindex: 0，// 赛 事 数 组 下 标 
xsnames: [],// 选 手数 组 


心 w IN 
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xsindex: 0，// 选 手数 组 下 标 

pwnames: [],// 评 委 数组 

pwindex: 0，// 评 委 数 组 下 标 
}, 


co ~ ea ou 


@) 监听 页 面 显示 事件 。 
在 评委 评分 页 面 显 示 时 ， 首 先 需 要 从 云 数据 库 集合 ssxx 中 读 取 全 部 已 注册 的 赛事 信 
并 将 其 保存 到 本 地 的 ssxxs 数组 中 。 


于 onShow: function () { 

2 var that = this 

1 db.collection('ssxx') .where({ }) 
4 .get ({ 

3 success: function (res) { 

6 that .setData({ 

7 SSXXS: res.data 

8 }) 

9 }, 

10 fail: function (res) { 

11 Var code = res.errCode 

这 if (code == -1) { 
wx.SshowToast ({ 

14 title: ' 网 络 没有 连接 ? ! '， 
15 duration: 2000, 

16 icon: 'none' 

17 }) 

18 } 

; } 

20 时 


息 ， 


上 述 第 3~20 行 代码 表示 从 ssxx 数据 库 集合 中 取出 赛事 信息 记录 ， 如 果 取 出 成 功 ， 则 将 
赛事 信息 记录 保存 在 ssxxs 中 ， 否 则 提示 出 错 信息 。 其 中 第 3 行 的 where({ }) 子 句 没有 写 任 


何 筛选 条 件 ， 表 示 取 出 ssxx 数据 库 集合 中 的 全 部 记录 。 
@ 赛事 名 称 选择 事件 。 


评委 选择 赛事 名 称 后 ， 从 该 赛事 记录 中 获取 选手 信息 属性 ssxsinfo 和 评委 信息 属性 


sspwinfo， 并 更 新 到 评委 评分 页 面 绑 定 的 数组 变量 xsnames 和 pwnames 数组 变量 。 


pickSsname: function (e) { 
this.setData({ 


ssindex: e.detail.value, // 更 新 当前 赛事 信息 下 标 


pwnames: this.data.ssxxs[e.detail.value] .sspwinfo // 更 新 评委 姓名 选择 器 信息 


}) 
}, 


选手 姓名 选择 事件 pickXsname( ) 只 要 更 新 当前 选手 信息 下 标 xsindex、 评 委 姓 名 事 


了 
2 
3 
4 xsnames: this.data.ssxxs[e.detail.value] .ssxsinfo，// 更 新 选手 姓名 选择 器 信息 
1 
6 
+ 


有 件 


pickPwname( ) 只 要 更 新 当前 评委 信息 下 标 pwindex， 其 实现 代码 与 赛事 名 称 选择 事件 类 似 ， 


不 再 歼 述 。 读 者 可 以 参阅 代码 包 lesson8_pfxt 文件 夹 中 的 内 容 。 
外 自 定义 更 新 指定 赛事 记录 方法 。 
1 updatemsg: function ( id, info) { 


加 db.collection('ssxx'") .doc( id) .update({ 
| data: { 
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4 ssxsinfo: info 

5 }, 

6 success (res) { 

二 console .1og(' 评 分 成 功 '，res) 
8 }, 

9 Eall(orry 

10 console.1og(' 评 分 失败 '，err) 
11 } 

12 ]) 

To 


updatemsg( ) 方 法 根据 需要 更 新 的 赛事 记录 _id 和 选手 信息 info 更 新 该 记录 的 ssxsinfo 字段 。 

@ 提交 按钮 事件 。 

在 赛事 名 称 、 评委 姓名 、 选手 姓名 和 得 分 选择 输入 完成 后 , 单 击 评委 评分 页 面 的 “提交 ” 
按钮 , 就 可 以 调用 自 定义 更 新 赛事 记录 的 updatemsg( ) 方 法 , 将 所 有 指定 的 选手 信息 更 新 到 云 
数据 库 集合 对 应 的 记录 中 。 


1 formsubmit: function (e) { 

人 2 var pfinfo = e.detail.value // 取 出 表单 提交 值 

| var that = this 

4 var il = this.data.ssindex // 赛 事 下 标 

5 var i2 = this.data.xsindex // 选 手下 标 

6 var i3 = this.data.pwindex // 评 委 下 标 

gd // 将 某 赛事 的 ssxsinfo (选手 信息 ) 取出 

8 var ssxsinfo = this.data.ssxxs[il] .ssxsinfo 

9 // 将 某 评 委 为 某 选 手 的 打分 值 保 存 到 该 选手 对 应 的 得 分 数组 score 中 
10 ssxsinfo[i2] .score[i3] = pfinfo.pwmark 

a var id = this.data.ssxxs[il]. id // 从 赛事 信息 il 下 标的 数组 中 取出 _ia 
3 this.updatemsg( id, ssxsinfo) // 根 据 _id 更 新 记录 内 容 
13 }, 


选手 成 绩 页 面 的 设计 与 实现 

(1) 选手 成 绩 界面 设计 。 

从 图 8.32 可 以 看 出 ,选择 赛事 名 称 使 用 picker 和 input 组 件 组 合 实现 ， 每， 
位 选手 姓名 、 最 终 得 分 及 每 位 评委 的 打分 需要 使 用 wx:for 列表 泻 染 的 恢 套 实现 次 

@D 页 面 结构 文件 代码 。 


8.3.2.6 
1 <view class='clocklist'> 
这 <picker bindchange='pickSsname' mode='selector' range-key='ssname'" 
range='{{ssxxs}}' value='{{ssindex}}'> 
3 <input class="rowline" placeholder=" 单 击 选择 赛事 名 称 " value= 
'{{ssxxs[ssindex] .ssname}}' name="ssname" /> 
4 </picker> 
5 <scroll-view scroll-y style="'height:90%'> 
6 <View wx:for='{{xsnames}}' wx:for-index="i" wx:for-item="iitem"> 
2 <view id="'{{i}}" class='item'>{{i+1}}. {{iitem.xsname}} 
8 <view wx:for='{{pwnames }' wx:for-index="j" wx:for-item= "jitem" > 
9 <view>{{iitem.score[j]}}|I</view> 
10 </view> 
了 <view>{{iitem.score[index] }}</view> 
12 </view> 
33 </view> 


14 </scroll-view> 
15 </view> 
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上 述 第 6 行 代码 的 wx:for 列表 演 染 用 于 根据 选手 人 数控 制 页 面 显示 的 行 数 ; 第 7 行 代码 
用 于 显示 选手 序号 和 选手 姓名 ; 第 8 行 代码 的 wx:for 列表 泻 染 用 于 根据 评委 人 数控 制 每 行 选 
手 的 评委 打分 列 数 ， 第 9 行 代码 用 于 显示 每 位 选手 的 最 终 得 分 。 

@ 页 面 样式 文件 代码 。 


1 page { 

之 background: #D5D3B3; 

a 

4 .Clocklist { 

5 padding-left: 20rpx; 

6 padding-right: 20rpx; 

3 

8 .rowline { 

9 padding-top: 15rpx; 

10 padding-bottom: 1l5rpx; 

:a 

12 input { 

3 text-align: center; 

14 border: 2rpx solid gainsboro; 
| 

16 .item { 

7 display: flex; 

18 justify-content: space-between; 
19 align-items: center; 

20 padding-top: 15rpx; 

2 padding-bottom: 15rpx; 

之 妆 border-bottom: 2rpx dotted grey; 
2 


(2) 选手 成 绩 页 面 功能 实现 。 

选手 成 绩 页 面 显示 时 ， 与 评委 打分 页 面 一 样 ， 首 先 需 要 从 云 数据 库 集合 
ssxx 中 读 取 全 部 已 注册 的 赛事 信息 ， 并 将 其 保存 到 本 地 的 ssxxs 数组 中 ， 该 处 : 
理 过 程 与 评委 打分 页 面 完 全 一 样 ;然后 将 赛事 名 称 绑 定 到 页 面 的 picker 组 件 上 ， 国 窗 二 
最 后 根据 用 户 选择 的 赛事 名 称 计算 出 每 位 选手 的 最 终 得 分 , 并 显示 在 选手 成 绩 。 8.3.2.7 
页 面 上 。 由 于 需要 在 该 页 面 全 局 使 用 云 开发 环境 kyp-b6580a， 所 以 需要 定义 db 为 页 面 全 局 
变量 ， 实 现代 码 与 管理 员 页 面 实 现代 码 类 似 。 


初始 化 数据 。 
data: { 
之 Srxse fl // 赛 事 信息 
3 ssindex: 0， // 赛 事 数组 下 标 
4 xsnames: [] ， // 选 手数 组 
5 pwnames: [] ， // 评 委 数组 
6 index:0, // 选 手 得 分 下 标 
二 


@ 赛事 名 称 选择 事件 。 
单 击 赛事 名 称 输入 框 时 ， 在 页 面 底 部 显示 选择 滚动 器 ， 在 深 动 器 选择 需要 查看 的 赛事 名 
就 可 以 在 页 面 上 显示 该 赛事 选手 的 相关 成 绩 。 


关 


EB pickSsname: function (e) { 
2 var i = e.detail.value 
3 var xsnames = this.data.ssxxs[i] .ssxsinfo  // 取 出 当前 赛事 的 选手 信息 
4 var pwnames = this.data.ssxzxs[i] .sspwinfo  // 取 出 当前 赛事 的 评委 信息 
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5 for (var i = 0; i < xsnames.length; i++) { // 按 照 选手 人 数 外 循环 
6 Var sum =0 

yy) for (var j] = 0; j < pwnames.length; j++) { / /按照 评 委 人 数 内 循环 
8 sum = sum +parseFloat (xsnames[i] .score[j]) // 计 算 每 位 选手 总 分 
9 } 

10 var max = Math.min.apply (null，xsnames[i] .score) // 最 高 分 

和 var min = Math.max.apply (null, xsnames[i] .score)// 最 低 分 

2 sum = sum - max -min // 去 掉 最 高 分 和 最 低 分 
了 Var temp = sum / (pwnames.length - 2) // 求 出 平均 值 

14 xsnames[i] .score.push (temp) // 将 得 分 加 入 score 数组 
5 ) 

16 this.setData({ 

Er index:pwnames.length, // 选 手 最 后 得 分 下 标 
18 ssindex:e.detail.value, 

5 xsnames:xsnames, 

20 pwnames:pwnames 

2 }) 

22 }, 


上 述 第 7~9 行 代码 求 出 每 位 评委 给 每 位 选手 的 打分 值 总 和 ; 第 10~11 行 代码 分 别 调用 
JavaScript 语言 中 从 数组 中 取得 最 大 值 、 最 小 值 的 函数 , 求 出 每 位 评委 给 每 位 选手 打分 值 的 最 
高 分 和 最 低 分 ; 第 12~13 行 代码 表示 去 掉 一 个 最 高 分 和 一 个 最 低 分 ， 求 出 该 选手 的 最 终 得 分 
〈 本 项 目 案例 的 最 终 得 分 用 平均 分 表示 )， 然 后 将 最 终 得 分 追加 入 选手 信息 数组 的 score 属性 
中 ， 以 便 在 页 面 的 最 后 一 列 显示 该 选手 的 最 终 得 分 。 

到 此 ， 竞 赛 打分 系统 小 程序 已 经 基本 实现 ， 但 功能 上 还 可 以 进一步 扩展 ， 比 如 本 案例 项 
目 实现 的 评分 是 去 掉 一 个 最 高 分 和 一 个 最 低 分 求 得 平均 值 ， 读 者 可 以 在 选手 成 绩 页 面 增加 可 
供用 户 选择 的 评分 选项 ， 进 一 步 提高 打分 系统 小 程序 的 灵活 性 。 


全 ?8.4 天 气 预报 系统 的 设计 与 实现 。 


随 着 手机 、 平 板 电脑 等 移动 设备 的 普及 ， 用 户 对 应 用 App 的 需求 也 在 不 断 增加 。 传 统 的 
天 气 预 报 在 时 效 性 、 功能 性 上 已 无 法 满足 公众 的 需求 , 各 种 天 气 预 报应 用 App 应 运 而 生 。“ 互 
联网 +” 时 代 的 来 临 , 天 气 与 农业 、 天 气 与 交通 等 的 结合 , 也 给 天 气 预报 App 带 来 一 场 革 新 。 
本 节 基 于 微 信 平台 开发 设计 一 款 可 以 满足 用 户 需求 、 方 便 快 捷 、 功 能 完善 的 城 国共 
市 天 气 预 报 小 程序 。 二 


8.4.1 “预备 知识 站 


服务 器 域名 配置 RL 

微 信 小 程序 是 前 端 框架 ， 在 实际 应 用 开发 中 ， 绝 大 多 数 小 程序 都 需要 与 后 台 服 务 器 进行 
交互 , 也 就 是 要 向 后 台 服 务 器 发 起 网 络 请 求 。 但 是 小 程序 必须 使 用 HTTPS 协议 (wx.request、 
wx.uploadFile、wx.downloadFile) 和 WSS 协议 (wx.connectSocket) 发 起 网 络 请 求 ， 请 求 时 
系统 会 对 服务 器 域名 使 用 的 HTTPS 证 书 进行 校 验 ， 如 果 检 验 失败 ， 则 请 求 不 能 成 功 。 由 于 
系统 限制 ， 不 同 平台 对 证 书 要 求 的 严格 程度 不 同 ， 为 了 保证 小 程序 的 兼容 性 ， 开 发 者 应 按 昭 
最 高 标准 进行 证 书 配置 。 

每 个 微 信 小 程序 只 可 以 跟 指定 域名 的 服务 器 进行 网 络 通信 ， 所 以 在 开发 具有 网 络 访问 功 
能 的 小 程序 时 ， 都 需要 登录 小 程序 后 台 进 行 服务 器 域名 配置 ， 配 置 流 程 如 图 8.8 所 示 。 开 发 
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者 配置 时 需要 注意 以 下 几 点 : 

四 域名 只 支持 HITPS (wxrequest 、wxuploadFile 、wx.downloadFile ) 和 WSS 
(wx.connectSocket) 协议 。 

@ 域名 不 能 使 用 他 地址 或 localhost。 

@ 可 以 配置 端口 , 如 https://myserver.com:8080, 但 是 配置 后 只 能 向 https://myserver.com: 
8080 发 起 请 求 。 

@ 如 果 不 配置 端口 ， 如 https://myservercom， 那 么 请 求 的 URL 中 也 不 能 包含 端口 。 

@ 域名 必须 经 过 ICP 备案 。 

@ 出 于 安全 考虑 ，api.weixin.qq.com 不 能 被 配置 为 服务 器 域名 ， 相关 API 也 不 能 在 小 程 
序 内 调用 。 开 发 者 应 将 AppSecret 保存 到 后 台 服 务 器 中 , 通过 服务 器 使 用 getAccessToken( ) 
接口 获取 access_token， 并 调用 相关 API。 

@ 每 个 接口 分 别 可 以 配置 最 多 20 个 域名 。 

另外 ， 为 了 方便 开发 者 调试 正在 开发 的 小 程序 ， 可 以 在 微 信 开 发 者 工具 中 临时 开启 “ 开 
发 环境 不 校 验 请 求 域名 、TLS 版 本 及 HTTPS 证 书 ” 选项 ， 跳 过 服务 器 域名 的 校 验 ， 如 图 8.34 
所 示 。 此 时 ， 在 微 信 开 发 者 工具 中 及 手机 开启 调试 模式 时 ， 不 会 进行 服务 器 域名 的 校 验 。 


基本 信息 本 地 设置 项 目 配置 
调试 基础 库 277 1599% vv ? 
ES6 转 ES5 


上 传代 码 时 样式 自动 补 全 

上 传代 码 时 定 动 压缩 混淆 ( UglifyJs ) 
上 传 时 进行 代码 保护 
启用 让 定义 处 理 命令 


图 8.34 ”调试 小 程序 参数 配置 
网 络 访问 API i 
wx.request (Object object): 发 起 HITPS 网 络 请 求 ，Object 参数 及 功 
能 说 明 如 表 8-20 所 示 。 它 返回 一 个 网 络 请 求 任务 对 象 RequestTask, RequestTask 
的 方法 及 功能 说 明 如 表 8-21 所 示 。 
表 8-20 object 参数 及 功能 说 明 


属 性 类 型 功 能 
ul | String 要 请 求 访问 的 服务 器 接口 地 址 ， 必 填 


data | string/Object/ArayBuffer | 请 求 参数 
header | Obiject 设置 请 求 的 header，header 中 不 能 设置 Referer 


迁 第 8 章 网 络 应 用 与 云 开发 必定 


续 表 


属 性 
method | String 
dataType | sting 
responseType | String 


功 能 

HTTP 请 求 方法 ， 常 用 GET/POST。 默 认为 GET 
返回 的 数据 格式 。 默 认为 ISON 
响应 的 数据 类 型 。 默 认为 text 


Success | Object 成 功 回调 函数 
fail | obiect 失败 回调 函数 
complete 结束 回调 函数 


表 8-21 RequestTask 的 方法 及 功能 说 明 
方 法 参数 类 型 功 能 
abort 无 中 断 请 求 任务 
offHeadersReceived(callback) Function 取消 监听 HTTP Response Header 事件 
onHeadersReceived(callback) 监听 HTTIPResponse Header 事件 


success(res) 回调 函数 的 res.data 返回 所 请 求 服务 器 的 数据 、res.statusCode 返回 服务 器 返 
回 的 HTTP 状态 码 、res.header 返回 服务 器 返回 的 HTTP Response Header。 因 此 向 某 服务 器 发 
出 请 求 的 代码 如 下 : 

wx.request ({ 
url: 'http://www.stzfz.com/bumenshow.php', 


data: { 
data id: 8085 


success: function (e) { 
console.1og(e.data) 


法 

2 

3 

4 

5 }, 
6 

入 

8 } 
9 


}) 


上 述 第 2 行 代码 设 定 要 访问 的 服务 器 地 址 ， 第 3~5 行 设 定 访问 该 服务 器 的 参数 。 上 述 第 
2~5 行 代码 可 以 直接 用 下 列 代码 替代 : 


1 url: "http://www.stzfz.com/bumenshow.php?data_id=8085"， 


如 果 小 程序 的 某 个 功能 模块 需 要 触发 中 断 网 络 请 求 任务 ， 可 以 用 如 下 步 又 实现 ; 
。 发 起 网 络 请 求 . 


Var task = wx.request ({ 
url: 'http://www.stzfz.com/bumenshow.php?data id=8085°', 
success:function(e){ 
console.log(e.data) 
} 
}) 


um 必 wmhP 


。 中 断 网 络 请 求 。 
1 task.abort() 
@ wx.downloadFile(Object object): 下 载 文 件 资源 到 本 地 ，Object 参数 及 功能 说 明 如 


表 8-22 所 示 。 客 户 端 直接 发 起 一 个 HTTPS GET 请 求 ， 返 回 文件 的 本 地 临时 路 径 ， 单 次 下 
载 允 许 的 最 大 文件 为 50MB。 它 返回 一 个 可 以 监听 下 载 进度 变化 事件 ， 以 及 取消 下 载 任务 的 
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对 象 DownloadTask，DownloadTask 的 方法 及 功能 说 明 如 表 8-23 所 示 。 


表 8-22 Object 参数 及 功能 说 明 


要 下 载 资源 的 URL， 必 填 


header 设置 请 求 的 header，header 中 不 能 设置 Referer 
filePath | string 指定 文件 下 载 后 存储 的 路 径 

Success | obiect 成 功 回调 函数 

fail | obiect 失败 回调 函数 


complete 结束 回调 函数 


表 8-23 ”DownloadTask 的 方法 及 功能 说 明 


方 法 参数 类 型 功 能 
abort 无 中 断 下 载 任务 
offHeadersReceived (callback) Function 取消 监听 HTTP Response Header 事件 
offProgressUpdate (callback) Function 取消 监听 下 载 进度 变化 事件 
onHeadersReceived(callback) 监听 HITPResponse Header 事件 
onProgressUpdate(callback) 监听 下 载 进度 变化 事件 


success(res) 回调 函数 的 res.tempFilePath 返回 下 载 到 本 地 的 资源 文件 临时 路 径 〈 没 有 传 
入 filePath 时 才 会 返回 ), res.filePath 返回 下 载 到 本 地 由 请 求 传 入 资源 文件 路 径 , res.statusCode 
返回 服务 器 返回 的 HITP 状态 码 。 因 此 向 某 服务 器 发 出 下 载 请 求 的 代码 如 下 : 


wx.downloadFile({ 
url: 'https://example.com/audio/123'，// 仅 为 示例 ， 并 非 真 实 的 资源 
success (res) { 
if (res.statusCode === 200) { 
wx.playVoice({ 
filePath: res.tempFilePath 


Foowamwmewnb 


上 述 第 3~9 行 代 码 表示 只 要 服务 器 有 响应 数据 ， 就 会 把 响应 内 容 写 入 文件 并 进入 
success( ) 回 调 。 

@ wx.uploadFile(Object object): 将 本 地 资源 上 传 到 服务 器 ，Object 参数 及 功能 说 明 如 
表 8-24 所 示 。 客 户 端 直接 发 起 一 个 HTTPS POST 请 求 。 它 返回 一 个 可 以 监听 上 传 进度 变化 
事件 ， 以 及 取消 上 传 任务 的 对 象 UploadTask。UploadTask 的 方法 及 功能 说 明 如 表 8-25 所 示 。 


表 8-24 Object 参数 及 功能 说 明 


| string 要 上 传 资源 的 URL， 必 填 
name | string 。 “| 文件 对 应 的 key， 开 发 者 在 服务 器 端 可 以 通过 key 获取 文件 的 二 进 制 内 容 
filePath | sting | 要 上 传 文件 资源 的 路 径 ， 必 填 
header | Object | 设置 请 求 的 header，header 中 不 能 设置 Referer 


formData HTTP 请 求 中 其 他 额外 的 表单 数据 
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续 表 


属 性 
success | Object 
fail | Object 
complete 


成 功 回调 函数 
失败 回调 函数 
结束 回调 函数 


方 法 参数 类 型 功 能 
abort 无 中 断 上 传 任务 
offHeadersReceived (callback) Function 取消 监听 HTTP Response Header 事件 
offProgressUpdate (callback) Function 取消 监听 上 传 进度 变化 事件 
onHeadersReceived(callback) Function 监听 HITPResponse Header 事件 


‘onProgressUpdate(callback) Function 监听 上 传 进度 变化 事件 


success(res) 回调 函数 的 res.data 返回 服务 器 返回 的 数据 ，res.statusCode 返回 服务 器 返回 
的 HITP 状态 码 。 因 此 向 某 服务 器 上 传 文件 资源 的 代码 如 下 : 


可 wx.chooseImage ({ 

2 success (res) { 

| Var tempFilePaths = res.tempFilePaths 
4 wx.uploadFile ({ 

时 url: "https://example.weixin.qq.com/upload'， 
6 filePath: tempFilePaths 0], 

name: 'myfile', 

8 formData: { 

| Mi 

10 }, 

ll success (res){ 

12 console.1log(res.data) 

13 } 

14 }) 

35 } 

6 Py 


上 述 代码 表示 从 本 地 选择 一 个 资源 文件 ， 上 传 到 第 5 行 代码 指定 的 服务 器 地 址 。 
8.4.2 ”天 气 预 报 系统 的 实现 


天 气 预报 系统 小 程序 仅 有 一 个 图 8.35 所 示 的 页 面 ， 小 程序 一 旦 启动 加 载 ， 就 会 自动 定位 
到 移动 终端 设备 目前 所 在 位 置 ， 并 将 当前 位 置 所 在 地 、 当 天 的 天 气 状况 等 信息 显示 在 页 面 的 
对 应 位 置 ， 用 户 向 下 拉动 屏幕 区 域 ， 会 显示 当前 位 置 未 来 三 天 的 天 气 预 报信 息 ， 并 显示 在 
图 8.36 所 示 的 页 面 底部 位 置 。 单 击 页 面 最 上 面 的 输入 框 ， 屏 幕 底部 会 弹出 省 市 区 选择 器 ,用 
户 从 省 市 区 选择 器 选择 某 个 市 区 地 址 后 ， 会 自动 加 载 该 市 区 的 当天 天 气 状况 和 未 来 三 天 的 天 
气 预报 信息 。 单 击 页 面 上 的 定位 图 标 ， 会 自动 加 载 当 前 位 置 的 天 气 状 况 和 未 来 三 天 的 天 气 预 
报信 息 。 加 和 次 册 回 

项 目 创建 

根据 天 气 预 报 系统 功能 需求 的 介绍 ， 需 要 在 小 程序 项 目下 创建 mages 文 六 
件 夹 ,用 于 存放 小 程序 开发 中 用 到 的 图 片 资源 文件 ， 图 片 资源 文件 包含 页 面 背 
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景 图 片 、 定 位 图 标 及 天 气 状 况 图 等 3 类 图 片 ; 
主页 页 面 (home)。 


eeeee WeChats 100% mm “e000e WeChats 


.| © 


详细 代码 如 下 : 


"pages": [ 
"pages/home/home", 

], 

"window": { 
"backgroundTextStyle": "light", 
"navigationBarBackgroundColor": "#344E5B", 
"navigationBarTitleText": "天 气 预 报 "， 
”navigationBarTextStyle": "white", 
"enablePullDownRefresh": true 

}, 

"sitemapLocation": "sitemap.json", 

"permission": { 
"scope .userLocation": { 


"desc": "你 的 位 置信 息 将 用 于 小 程序 位 置 接口 的 效果 展示 " 


上 述 第 10 行 代码 表示 小 程序 的 所 有 页 面 都 可 以 实现 下 拉 屏 幕 操作 


在 pages 文件 夹 下 创建 1 个 文件 夹 ， 用 于 存放 


100% En) 


‘© 


由 于 小 程序 能 够 实现 定位 和 下 拉 屏 幕 等 功能 ， 所 以 需要 修改 appjson 全 局 配置 文件 ， 其 


; 第 13~16 行 代码 表 
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示 小 程序 允许 获取 地 理 位 置 。 
主 界面 的 设计 
从 图 8.35 可 以 看 出 ， 整 个 界面 设计 分 为 四 个 部 分 ， 选 择 地 点 输入 区 
Pe de ope 人 he 1 


vicw 和 i image et 未 来 三 天 天 气 we ee 
用 户 下 拉 屏 幕 时 会 使 用 wx:for 列表 泻 染 显示 三 天 的 天 气 预 报信 息 。 
(1) 页 面 结构 文件 代码 。 


1 <view class="wpage" style="background:url({{bgimg}});"> 

2 ”<!--> 选 择 地 点 输入 区 <--> 

3 <picker mode='region' bindchange="selectCity" value="{{citys}}"> 

4 <input placeholder=" 请 选择 城市 名 称 " value="{ {cityName}}"></input> 

5 </picker> 

6 <!--> 定 位 地 点 和 时 间 更 新 信息 显示 区 <--> 

<view class="location"> 

8 <view class="location"> 

9 <image style="width:70rpx;height:80rpx;" src="/images/location.png" 
bindtap="getAddress"></image> 

10 <view style="font-size:60rpx;padding-left:40rpx;">{{cityName}} 

11 </view> 

2 </view> 

13 <view style="font-size:25rpx;padding-right:20rpx; ">{{info}} 更 新 </view> 


14 </view> 
3 <1--> 当 天 天 气 状 况 (气温 、 天 气 情况 及 对 应 天 气 情况 图 标 ) 显示 区 <--> 


16 <view class="info"> 


<view style="font-size:160rpx">{{tempture}} 

18 <text style="font-size:40rpx">'C</text> 

EE </view> 

20 <view style="display:flex;flex-direction:column;align-items: center;"> 
2 <view>{{tiangqi}}</view> 

22 <image style="width:120rpx;height:120rpx;" src="{{wimg}}"></image> 
23 </View> 


24 </view> 

25 ”<!--> 未 来 三 天 天 气 预报 信息 显示 区 <--> 

26 ”<view class="bottom"> 向 下 滑 屏 显示 未 来 天 气 状况 </view> 
2 <view class="nav" style="display:{{nav}}"> 


28 <view> 未 来 三 天 预报 </view> 


29 <view style="background: white; height: 2rpx;"></view> 

30 <view class="weather"> 

< <View wx:for='{{weathers}}'> 

多 <view>{{item.date}}</view> 

33 <view>{{item.low}}~{{item.high}}'C</view> 

34 <view> 白 天 : {{item.text day}}</view> 

35 <View> 夜 晚 :，{{item.text night}}</view> 

36 <view>{{item.wind direction}} 风 {{item.wind scale}} 级 </view> 
37 </view> 

38 </view> 


39 </view> 
40 </view> 


上 述 第 1 行 代码 使 用 ee 属性 绑 定 bgimg 变量 ， 用 于 根据 天 气 状况 加 载 
天 气 预报 系统 页 面 的 背景 图 
(2) esa 
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下 page { 

4 width: 100%; 

二 height: 100%; 

4 background: #344e5b; 
S00 

6 -wpage { 

7/ width: 100%; 

8 height: 100%; 

多 

10 input { 


5 padding: 20rpx; 

12 text-align: center; 
5 border-bottom: 2rpx solid white; 
14 color: yellow; 

be 

16 .location { 

1 display: flex; 

18 flex-direction: row; 
19 height: 100rpx; 

20 align-items: center; 
之 机 justify-content: space-between; 
22 color: yellow; 

| 

24 no 

25 padding-top: 50rpx; 
26 display: flex; 

27 flex-direction: column; 
28 height: 400rpx; 

人 color: yellow; 

30 align-items: center; 
3 

32 .bottom { 

33 position: fixed; 

34 bottom: Opx; 

35 width: 100%; 

36 ‘opacity: 1; 

37 z-index: 10004; 

38 text-align: center; 
39 color: yellow; 

40 } 

a1 “nav { 

42 position: fixed; 

43 bottom: Opx; 

44 height: 380rpx; 

45 background: #1d62a2; 
46 width: 100%; 

47 opacity: 0.6; 

48 z-index: 10004; 

49 text-align: center; 
50 color: white; 

Sl EF 

52 .weather { 

53 padding: 25rpx; 

54 display: flex; 

|] justify-content: space-between; 
56 font-size: 30rpzx; 


上 述 第 32~40 行 代码 样式 表示 在 页 面 底部 显示 “向 下 滑 屏 显 示 未 来 天 气 状 
况 ” 第 41~51 行 代码 表示 在 页 面 显示 透明 度 为 0.6 的 “未 来 三 天 天 和 气 预报 器 


信息 ” 


8.4.2.4 
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图 心 知 天 气 API 接口 介绍 

本 案例 项 目 使 用 心 知 天 气 API 接口 向 心 知 服务 器 请 求 天 气 状况 数据 ， 关 于 心 知 天 气 API 
的 使 用 文档 ， 读 者 可 以 登录 https://docs.seniverse.com/api/start/start.html 网 页 查看 。 心 知 天 气 
API 接口 需要 开发 者 在 心 知 服务 器 注册 成 功 ， 并 获得 API 私有 密 钥 ， 才 能 免费 或 付费 使 用 其 
提供 的 天 气 状况 数据 服务 。 

(1) 当天 天 气 状况 数据 服务 API。 

https://api.seniverse.com/v3/weather/now.json?key=your_private key&location=beijing&lang 
uage=zh-Hans&unit=c， 其 中 key 为 开发 者 申请 获得 的 私有 密 钥 ,location 为 所 查询 的 位 置 (位 
置 格式 参数 示例 如 表 8-26 所 示 )，language 为 支持 语言 (表示 简体 中 文 )，unit 为 单位 ， 默 认 
值 为 c( 温 度 的 单位 C、 风 速 的 单位 km/h、 能 见 度 的 单位 km、 气 压 的 单位 mb )。 


表 8-26 ”位 置 格式 参数 示例 及 功能 说 明 


位 置 格式 示例 位 置 格式 示例 


ET 
hi 


(2) 未 来 三 天 天 气 预报 数据 服务 API。 
https://api.seniverse.com/v3/weather/daily.json?key=your_api_ key&location=beijing&langua 
ge=zh-Hans&unit=c&zstart=0&days=5， 其 中 key、location、language、unit 的 参数 与 当前 天 气 
状况 数据 服务 API 完全 一 样 。 ar 
心 知 天 气 API 接口 获取 指定 城市 的 未 来 天 气 预报 状况 最 多 为 15 天 ， 包 括 3 
每 天 的 白天 和 夜间 预报 ， 以 及 昨日 的 历史 天 气 。 付 费用 户 可 获取 全 部 数据 ， 免 


费用 户 只 返回 3 天 天 气 预报 。 ne 

加 功能 实现 Ss 

天 气 预报 系统 页 面 加 载 时 ,首先 调用 wx.getLocation( ) 方 法 获 取 当 前 位 置 经 纬度 的 值 , 然 
后 将 经 纬度 的 值 转换 为 表 8-26 中 的 对 应 格式 ,分别 调用 当天 天 气 状况 数据 服务 API、 未 来 三 


天 天 气 预报 数据 服务 API 到 心 知 天 气 服务 器 获取 相应 的 数据 ， RR 
于 获取 的 位 置信 息 在 整个 页 面 代码 中 都 需要 使 用 , 所 以 定义 newLocation 为 页 面 全 局 变量 。 
(1) 初始 化 数据 。 


还 data: { 
2 bgimg: "/images/sun.jpg", // 默 认 页 面 背景 图 片 
3 cityse ED // 省 、 市 、 区 /县 
4 cityName: "", // 具 体 地 点 
5 info: '02-18 8: 00 更 新 '， 
6 tempture: 30, // 当 前 气温 
tianqi: ' 阴 '"， // 夫 气 状况 
8 wimg: '/images/10@lx.png', // 天 气 状况 图 标 
9 nav: "none' // 未 来 天 气 状 况 是 否 显示 
10 now: []， 7/ 硫 天 天 气 
EE weathers: [] 术 玉 来 三 天 天 气 ， 
了 2 }, 
(2) 自 定义 设置 页 面 背景 图 片 setBackImage(code) 方法 。 回 : 


小 程序 项 目的 images 文件 夹 中 存放 了 4 个 背景 图 片 ， 该 方法 根据 当天 天 en 
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气 状况 返回 的 code 值 ， 设 置 小 程序 页 面 最 终 加 载 的 背景 图 片 。 


setBackImage (code) { 

区 Var bgimg = "/images/wind.jpg" // 默 认 风沙 图 片 
二 if (code >= 0 && code <= 3) { // 上 晴天 图 片 

4 bgimg = "/images/sun.jpg" 

5 } 

6 1F (code > 4 && code <= 9j // 多 云 或 阴 图 片 
这 bgimg = "/images/cloud.jpg" 

8 } 

9 if (code >= 10 && code <= 25) {  // 下 雨 或 下 雪 图 片 
10 bgimg = "/images/rain.jpg" 

ll 由 

12 return bgimg 

DS On 


(3) 自 定义 获取 当天 天 气 状况 getWeather(latLon) 方法 。 


getWeather(latLon) 方法 通过 传 入 latLon 位 置 参数 值 ， 调 用 当天 天 气 状 况 数 据 服 务 API 


获得 天 气 状 况 数据 ， 并 将 该 数据 对 应 的 属性 值 更 新 到 页 面 变量 。 


E getWeather: function (latLon) { 

2 var that = this 

3 Var nowinfo = "'" 

4 wx.request ({ 

与 url: "https://api.seniverse.com/v3/weather/now.json?key= 
fdw9qkunlbtvenxt&location=' + latLon + '&language=zh-Hans&unit=c', 

6 success: function (res) { 

7 if (res.statusCode == '404') { 

8 wx.showModal ({ 

9 title: ' 警 告 '， 

10 content : "没有 该 城市 天 气 预 报 ! '， 

11 }) 

2 return 

13 } 

14 nowinfo = res.data.results[0] 

5 that.setDatal({ 

16 cityName: nowinfo.1ocation.name, // 定 位 地 点 
17 info: nowinfo.last update.substr(0, 19), // 更 新 时 间 
18 tianqi: nowinfo.now.text, // 天 气 状况 
19 tempture: nowinfo.now.temperature, // 气 温 

20 wimg: '/images/' + nowinfo.now.code + '@1x.png',// 天 气 状况 图 
人 下 bgimg: that.setBackImage (nowinfo.now.code) // 背 景 图 
22 于 

23 }, 

24 fail: function ({ errMsg }) { 

之 console.1og('request fail', errMsg) 

26 } 

27 }) 


28 1}, 


上 述 第 7~13 行 代码 表示 ,如果 传 入 的 位 置 参数 调用 的 API 接口 返回 状态 值 为 404, 则 表 
示 该 位 置 在 服务 器 端 不 能 正常 返回 天 气 状况 信息 ;第 20 行 用 于 设置 页 面 上 显示 的 天 气 状况 图 ， 
为 了 达到 这 一 效果 , 需要 在 小 程序 项 目的 images 文件 夹 中 存 入 以 code@1x.png 格式 为 文件 名 


的 天 气 状况 图 片 。 
(4) 自 定义 获取 未 来 三 天 天 气 预报 getPreWeather(latLon) 方 法 。 


getPreWeather (latLon) 方 法 通过 传 入 latLon 位 置 参数 值 调 用 未 来 三 天 天 气 预报 数据 服务 
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API 获得 未 来 三 天 的 天 气 预报 数据 ， 并 将 该 数据 对 应 的 属性 值 更 新 到 页 面 变量 。 


工 getPreWeather: function (latLon) { 

2 var that = this 

wx.request ({ 

4 url: 'https://api.seniverse.com/v3/weather/daily.json?key= 
fdw9qkunlbtvenxt&location=' + latLon + '&language= zh-Hansgunit= cg&start= 0 & 


days=5", 

a success: function (res) { 

6 that .setData({ 

yi weathers: res.data.results[0] .daily 
8 }) 

9 }, 

10 }) 

TL 


(5) 页 面 显示 监听 事件 。 


onShow: function () { 
var that = this 
wx.getLocation({ 
type: 'wgs84°', 
success: function (res) { 
newLocation = res.latitude + ":" + res.longitude 
that .getWeather (newLocation) // 调 用 当前 位 置 天 气 状 况 
that .getPreWeather (newLocation) // 调 用 未 来 三 天 天 气 预 报信 息 
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上 述 第 3 行 代码 表示 定位 当前 位 置 ,第 6 行 代码 表示 将 获得 的 纬度 ` 经 度 值 拼接 为 表 8-26 
中 的 经 纬度 位 置 格式 ， 第 7~8 行 分 别 调用 自 定义 方法 获得 当前 位 置 天 气 状 况 和 未 来 三 天 天 气 
预报 信息 。 
单 击 页 面 上 的 位 置 图 标 时 ， 获 取 当 前 位 置 的 天 气 状 况 和 未 来 三 天 天 气 预报 信息 ， 其 功能 
实现 与 onShow( ) 方 法 完全 一 样 ， 具 体 实现 时 只 需要 调用 onShow( ) 方 法 。 其 代码 如 下 : 
a getAddress: function () { 


这 this.onShow () 
3 }, 


(6) 单 击 地 点 选择 输入 框 事件 。 

单 击 地 点 选择 输入 框 时 ， 调 用 微 信 小 程序 开发 框架 提供 的 区 域 选择 器 ， 并 将 选择 器 中 选 
择 的 地 址 拼接 为 表 8-26 中 的 省 市 名 称 组 合 位 置 格式 , 然后 分 别 调用 自 定义 方法 获得 选中 位 置 
当前 的 天 气 状 况 和 未 来 三 天 的 天 气 预报 信息 。 


1 selectcity: function (e) { 

2 this.setData({ 

到 citys: e.detail.value, 

4 cityName: e.detail.value[2] 

5 }) 

6 this.getWeather (e.detail.value[0] + e.detail.value[2]) 

yr this .getPreWeather (e.detail.value[0] + e.detail.value[2]) 
BJ 


(7) 监听 用 户 下 拉动 作 〈 下 滑 屏 幕 ) 事件 。 
下 滑 屏 幕 时 ， 如 果 当 前 没有 显示 未 来 三 天 天 和 气 预报 信息 ， 则 显示 ， 和 否则 不 显示 。 具 体 实 
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现时 ， 只 需要 控制 页 面 结构 文 件 中 绑 定 的 nav 变量 值 。 


1 onPullDownRefresh: function () { 
4 if (this.data.nav =— 'none') { 
this.setDatal({ 

4 nav: "block' 

5 3 

6 } else { 

尖 this.setData({ 

8 nav: "none' 

9 汪 

10 } 

pe Wx.StopPullDownRefresh () 

2 hy 


本 章 结合 实际 案例 项 目的 开发 过 程 介绍 了 微 信 小 程序 开发 框架 访问 第 三 方 云 数据 库 平 
台 、 小 程序 云 开发 、 网 络 请 求 API、 向 服务 器 上 传 文件 API 以 及 从 服务 器 下 载 文件 API 的 使 
用 方法 ， 详 细 阐 述 了 它们 实现 网 络 访问 的 工作 机 制 和 基本 原理 。 通 过 本 章 的 学 习 ， 读 者 既 明 
白 了 微 信 小 程序 网 络 应 用 开发 的 流程 ， 也 掌握 了 相关 技术 。 


